面试上机题目--采用vue实现以下页面效果

效果图片：

页面代码：

 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>
View Code

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 }
View Code

公共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 }
View Code

 

posted @ 2020-09-18 14:58  肥龙啃锅盔  阅读(1041)  评论(0)  编辑  收藏  举报