效果图片：
页面代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- 添加公共样式 --> 8 <link rel="stylesheet" href="./css/gload.css"> 9 <!-- 添加单页面样式 --> 10 <link rel="stylesheet" href="./css/index.css"> 11 <title>面试题</title> 12 </head> 13 14 <body> 15 <div id="app"> 16 <!-- 页面开头区域，搜索框 --> 17 <div class="titleinput"> 18 <input type="text" placeholder="请输入你要搜索的" /> 19 <button>搜索</button> 20 </div> 21 <!-- 页面菜单区域 --> 22 <div class="titlemenu"> 23 <ul class="goodnume"> 24 <li class="left"><span>首页</span></li> 25 <li class="left title_menu"><span>手机</span></li> 26 <li class="left title_menu"> <span>电脑</span></li> 27 <li class="right"><span>筛选</span></li> 28 </ul> 29 </div> 30 <!-- 页面主体区域 --> 31 <div class="menu"> 32 <div class="box left" v-for="item in goodsList" :key="item.index"> 33 <div class="img"> 34 <img :src="item.img_url" alt=""> 35 </div> 36 <div class="goodsmenu"> 37 <span>工厂</span> 38 <span>热卖</span> 39 </div> 40 <div class="info">{{item.title}} 41 </div> 42 <div class="price"> 43 <span>￥{{item.sell_price}}</span> 44 <span>￥{{item.market_price}}</span> 45 </div> 46 </div> 47 48 </div> 49 50 </div> 51 52 </body> 53 <!-- 添加vue的js文件 --> 54 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> 55 <!-- 添加axios的文件 --> 56 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.js"></script> 57 <script> 58 new Vue({ 59 el: '#app', 60 data: { 61 goodsList: [] 62 }, 63 created: function () { 64 this.getGoodsList() 65 }, 66 methods: { 67 async getGoodsList() { 68 const { 69 data: res 70 } = await axios.get('http://api.flkgk.cn/api/getgoods?pageindex=1') 71 if (res.status !== 0) { 72 return console.log("数据获取失败！") 73 } 74 this.goodsList = res.message; 75 } 76 }, 77 }) 78 </script> 79 80 </html>
css代码：
1 /* index单页面样式 */ 2 .titleinput { 3 /* 搜索框的操作 */ 4 width: 100%; 5 height: 50px; 6 background: white; 7 border-bottom: 1px solid #eee; 8 display: flex; 9 align-items: center; 10 } 11 12 /* 输入框演示 */ 13 .titleinput input { 14 line-height: 30px; 15 height: 30px; 16 width: 250px; 17 border: 1px solid #eee; 18 margin-left: 30px; 19 border-radius: 15px; 20 text-align: center; 21 } 22 23 /* 按钮样式 */ 24 .titleinput button { 25 padding: 5px 5px; 26 text-align: center; 27 width: 80px; 28 border: none; 29 text-decoration: none; 30 display: inline-block; 31 font-size: 16px; 32 margin-left: 10px; 33 } 34 35 .titlemenu { 36 /* 菜单栏的样式 */ 37 width: 100%; 38 height: 40px; 39 background: white; 40 } 41 42 /* 设置菜单样式 */ 43 .goodnume { 44 font-size: 14px; 45 margin: 0 20px 0 20px; 46 } 47 48 .title_menu { 49 margin-left: 80px; 50 } 51 52 .goodnume li { 53 margin-top: 10px; 54 } 55 56 /* 商品主体区域 */ 57 .menu { 58 margin-top: 10px; 59 padding: 0 7px; 60 display: flex; 61 flex-wrap: wrap; 62 justify-content: space-between; 63 } 64 65 .box { 66 margin-bottom: 10px; 67 /* 商品框 */ 68 width: 169px; 69 height: 294px; 70 padding: 0 10px 0 10px; 71 background: white; 72 /* border: 1px solid red; */ 73 74 } 75 76 /* 商品图片 */ 77 .img { 78 margin-left: 9px; 79 width: 149px; 80 height: 180px; 81 /* border: 1px solid red; */ 82 } 83 84 img { 85 width: 100%; 86 height: 100%; 87 } 88 89 /* 商品标签区域 */ 90 .goodsmenu { 91 float: none; 92 height: 20px; 93 margin-top: 5px; 94 margin-left: 10px; 95 96 } 97 98 .goodsmenu span:nth-child(1) { 99 background: blueviolet; 100 font-size: 12px; 101 border-radius: 15px; 102 padding: 5px; 103 } 104 105 .goodsmenu span:nth-child(2) { 106 background: red; 107 font-size: 12px; 108 border-radius: 15px; 109 padding: 5px; 110 } 111 112 /* 商品名称 */ 113 .info { 114 margin-top: 10px; 115 margin-left: 9px; 116 width: 149px; 117 font-size: 14px; 118 overflow: hidden; 119 height: 40px; 120 /* border: 1px solid red; */ 121 } 122 123 /* 价格 */ 124 .price { 125 margin-top: 5px; 126 margin-left: 9px; 127 width: 149px; 128 height: 30px; 129 /* border: 1px solid red; */ 130 } 131 132 .price span:nth-child(1) { 133 font-size: 12px; 134 color: red; 135 } 136 137 .price span:nth-child(2) { 138 font-size: 12px; 139 margin-left: 40px; 140 text-decoration: line-through; 141 color: #aaa; 142 }
公共css代码；
1 /* 公共样式 */ 2 body, 3 #app, 4 ul, 5 li { 6 margin: 0px; 7 padding: 0px; 8 background: #eee; 9 } 10 11 ul { 12 list-style: none; 13 } 14 15 li { 16 list-style-type: none; 17 } 18 19 /* 浮动定位 */ 20 .left { 21 float: left; 22 } 23 24 .right { 25 float: right; 26 } 27 28 .clear { 29 float: none; 30 } 31 32 span { 33 background: white; 34 }