很喜欢这种布局:大方不失雅致:

电脑技术 电脑技术 109 人阅读 | 2 人回复 | 2024-12-19

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
这仅仅只是初步,后期上线估计还要润色,当然用的flex布局换行而已


vue3_layout.png


看来日本人还是很注重设计美学的



回答|共 2 个

legs+ 发表于 2024-12-19 16:57:35| 字数 3,262 | 显示全部楼层

  1. {
  2.   "shoes": [
  3.     {
  4.       "name": "ビビッドランニングシューズ 防水性 軽量タイプ グリーン",
  5.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。防水・防風・撥水性あり、屋外向け。",
  6.       "price": 9560,
  7.       "commentsNum": 16,
  8.       "photoFileName": "shoes-01.jpg",
  9.       "rating": 4.5
  10.     },
  11.     {
  12.       "name": "カジュアルシューズ 防臭効果と通気性◎ ブルーグレー",
  13.       "description": "特殊加工した樹脂を使用し、通気性も抜群。特に汗をかきやすい夏の時期、普段使いに。",
  14.       "price": 5400,
  15.       "commentsNum": 47,
  16.       "photoFileName": "shoes-02.jpg",
  17.       "rating": 4.0
  18.     },
  19.     {
  20.       "name": "カジュアルランニングシューズ ベージュ",
  21.       "description": "ランニングにはもちろん、ふんわりクッション性のあるソールは床に傷がつきにくく、屋内でも安心して使えます。",
  22.       "price": 6600,
  23.       "commentsNum": 13,
  24.       "photoFileName": "shoes-03.jpg",
  25.       "rating": 3.0
  26.     },
  27.     {
  28.       "name": "カジュアルシューズ 普段使いや通勤・通学にも!",
  29.       "description": "柔らかく丈夫な合皮を使用しており、通勤や通学にもぴったり。コーデの邪魔をしないシックなコンビカラーです。",
  30.       "price": 6900,
  31.       "commentsNum": 41,
  32.       "photoFileName": "shoes-04.jpg",
  33.       "rating": 3.5
  34.     },
  35.     {
  36.       "name": "ビビッドランニングシューズ 防滑性 ブルー",
  37.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・防滑性あり、屋内向け。",
  38.       "price": 9800,
  39.       "commentsNum": 41,
  40.       "photoFileName": "shoes-05.jpg",
  41.       "rating": 3.5
  42.     },
  43.     {
  44.       "name": "ランニングシューズ 防水性 ダークグレー&グリーン",
  45.       "description": "足元に蛍光色をオンして、ランニングも楽しく!防水メッシュ加工で、雨の日でも快適な履き心地です。",
  46.       "price": 7000,
  47.       "commentsNum": 14,
  48.       "photoFileName": "shoes-06.jpg",
  49.       "rating": 3.0
  50.     },
  51.     {
  52.       "name": "ランニングシューズ 防風性 ブラック&ブルー",
  53.       "description": "完全防水・滑りにくいグリップで初心者から上級者まで、幅広いランナーに対応。風を通しにくく真冬のランでも安心。",
  54.       "price": 7000,
  55.       "commentsNum": 20,
  56.       "photoFileName": "shoes-07.jpg",
  57.       "rating": 4.5
  58.     },
  59.     {
  60.       "name": "ランニングシューズ 防滑性 ダークグレー&レッド",
  61.       "description": "完全防水・滑りにくいグリップを採用。風を通しにくく真冬のランでも安心。こちらは軽量ゴム紐タイプで結ぶ手間ゼロ。",
  62.       "price": 8000,
  63.       "commentsNum": 11,
  64.       "photoFileName": "shoes-08.jpg",
  65.       "rating": 4.5
  66.     },
  67.     {
  68.       "name": "ビビッドランニングシューズ クッション性 ピンク",
  69.       "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・クッション性があり屋内屋外兼用。",
  70.       "price": 9980,
  71.       "commentsNum": 24,
  72.       "photoFileName": "shoes-09.jpg",
  73.       "rating": 4.5
  74.     },
  75.     {
  76.       "name": "ウォーキングシューズ 屈曲性超軽量タイプ ホワイト",
  77.       "description": "超軽量薄型。踏み返しをしながら歩行ができる設計になっており、ウォーキングの際の足にかかるストレスを軽減。",
  78.       "price": 8000,
  79.       "commentsNum": 46,
  80.       "photoFileName": "shoes-10.jpg",
  81.       "rating": 3.5
  82.     },
  83.     {
  84.       "name": "バスケットシューズ カジュアルメンズ マルチカラー",
  85.       "description": "クッション性や反発力、耐久性などの機能性を網羅しており、足首から爪先までしっかりフィットします。",
  86.       "price": 9900,
  87.       "commentsNum": 52,
  88.       "photoFileName": "shoes-11.jpg",
  89.       "rating": 4.0
  90.     },
  91.     {
  92.       "name": "カジュアル ウォーキングシューズ 大きいサイズあり",
  93.       "description": "男女兼用でサイズ展開も豊富!ビッグサイズも一部取扱いあり。ミッドソールはジェル素材で、膝への負担も軽減!",
  94.       "price": 7900,
  95.       "commentsNum": 59,
  96.       "photoFileName": "shoes-12.jpg",
  97.       "rating": 4.5
  98.     }
  99.   ]
  100. }
复制代码

一个json解决了,当然如果是vue或者react不是叫json,叫对象字面量,但是这里是xxx.json.

legs+ 发表于 2024-12-19 17:32:53| 字数 28 | 显示全部楼层

上面的图片,我本来不想说,我用了算法,就是三次贝塞尔曲线
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则