Merge Request #3
← To merge requests
From
adam:master
into
jp:master
Commits (1)
1 participants
Showing
2 changed files
Show diff stats
.gitignore
| 1 | .DS_Store | 1 | .DS_Store |
| 2 | node_modules/ | 2 | node_modules/ |
| 3 | unpackage/ | 3 | unpackage/ |
| 4 | dist/ | 4 | dist/ |
| 5 | 5 | ||
| 6 | # local env files | 6 | # local env files |
| 7 | .env.local | 7 | .env.local |
| 8 | .env.*.local | 8 | .env.*.local |
| 9 | 9 | ||
| 10 | # Log files | 10 | # Log files |
| 11 | npm-debug.log* | 11 | npm-debug.log* |
| 12 | yarn-debug.log* | 12 | yarn-debug.log* |
| 13 | yarn-error.log* | 13 | yarn-error.log* |
| 14 | 14 | ||
| 15 | # Editor directories and files | 15 | # Editor directories and files |
| 16 | .project | 16 | .project |
| 17 | .idea | 17 | .idea |
| 18 | .vscode | 18 | .vscode |
| 19 | *.suo | 19 | *.suo |
| 20 | *.ntvs* | 20 | *.ntvs* |
| 21 | *.njsproj | 21 | *.njsproj |
| 22 | *.sln | 22 | *.sln |
| 23 | *.sw* | 23 | *.sw* |
| 24 | yarn.lock | ||
| 24 | 25 |
src/pages/index/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <view class="header"> | 3 | <view class="header"> |
| 4 | <!-- 搜索--> | 4 | <!-- 搜索--> |
| 5 | <view class="searchBar"> | 5 | <view class="searchBar"> |
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | 6 | <icon class="searchIcon" type="search" size="14"></icon> |
| 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> | 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> |
| 8 | </view> | 8 | </view> |
| 9 | 9 | ||
| 10 | <!-- 筛选栏--> | 10 | <!-- 筛选栏--> |
| 11 | <view class="screenBar"> | 11 | <view class="screenBar"> |
| 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > | 12 | <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
| 13 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> | 13 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> |
| 14 | {{ item.text }}<icon type="info" size="14"></icon> | 14 | {{ item.text }}<icon type="info" size="14"></icon> |
| 15 | </view> | 15 | </view> |
| 16 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> | 16 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> |
| 17 | {{ item.text }}<icon type="info" size="14"></icon> | 17 | {{ item.text }}<icon type="info" size="14"></icon> |
| 18 | </view> | 18 | </view> |
| 19 | <view v-if="item.current !== 2&&item.current!==4"> | 19 | <view v-if="item.current !== 2&&item.current!==4"> |
| 20 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 20 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> |
| 21 | </view> | 21 | </view> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
| 24 | </view> | 24 | </view> |
| 25 | <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> | 25 | <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> |
| 26 | <view class="close"> | 26 | <view class="close"> |
| 27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> | 27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> |
| 28 | </view> | 28 | </view> |
| 29 | </Uni-drawer> | 29 | </Uni-drawer> |
| 30 | 30 | ||
| 31 | 31 | ||
| 32 | 32 | ||
| 33 | <!-- 筛选菜单--> | 33 | <!-- 筛选菜单--> |
| 34 | <view class="content-wrap"> | 34 | <view class="content-wrap"> |
| 35 | <view> | 35 | <view> |
| 36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> | 36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> |
| 37 | <!-- 商品列表 --> | 37 | <!-- 商品列表 --> |
| 38 | <view class="goods-list"> | 38 | <view class="goods-list"> |
| 39 | <view class="product-list"> | 39 | <view class="product-list"> |
| 40 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 40 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
| 41 | <image mode="widthFix" :src="goods.img" ></image> | 41 | <image mode="widthFix" :src="goods.img" ></image> |
| 42 | <view class="name">{{goods.name}}</view> | 42 | <view class="name">{{goods.name}}</view> |
| 43 | <view class="info"> | 43 | <view class="info"> |
| 44 | <view class="priceBox"> | 44 | <view class="priceBox"> |
| 45 | <view class="price">{{goods.price}}</view> | 45 | <view class="price">{{goods.price}}</view> |
| 46 | <view class="originCost">{{goods.originCost}}</view> | 46 | <view class="originCost">{{goods.originCost}}</view> |
| 47 | </view> | 47 | </view> |
| 48 | <view class="slogan">{{goods.slogan}}</view> | 48 | <view class="slogan">{{goods.slogan}}</view> |
| 49 | </view> | 49 | </view> |
| 50 | </view> | 50 | </view> |
| 51 | </view> | 51 | </view> |
| 52 | <view class="loading-text">{{loadingText}}</view> | 52 | <view class="loading-text">{{loadingText}}</view> |
| 53 | </view> | 53 | </view> |
| 54 | 54 | ||
| 55 | </view> | 55 | </view> |
| 56 | </view> | 56 | </view> |
| 57 | </view> | 57 | </view> |
| 58 | </template> | 58 | </template> |
| 59 | 59 | ||
| 60 | <script> | 60 | <script> |
| 61 | import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; | 61 | import UniDrawer from "@/components/uni-drawer/uni-drawer.vue"; |
| 62 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; | 62 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; |
| 63 | import data from '@/common/data.js';//筛选菜单数据 | 63 | import data from '@/common/data.js';//筛选菜单数据 |
| 64 | export default { | 64 | export default { |
| 65 | components: { | 65 | components: { |
| 66 | 'UniDrawer':UniDrawer, | 66 | 'UniDrawer':UniDrawer, |
| 67 | 'HMfilterDropdown':HMfilterDropdown | 67 | 'HMfilterDropdown':HMfilterDropdown |
| 68 | }, | 68 | }, |
| 69 | data() { | 69 | data() { |
| 70 | return { | 70 | return { |
| 71 | screenItems: [ | 71 | screenItems: [ |
| 72 | {current:0,text:'全部',hasIcon:false}, | 72 | {current:0,text:'全部',hasIcon:false}, |
| 73 | {current:1,text:'销量',hasIcon:false}, | 73 | {current:1,text:'销量',hasIcon:false}, |
| 74 | {current:2,text:'价格',hasIcon:true}, | 74 | {current:2,text:'价格',hasIcon:true}, |
| 75 | {current:3,text:'折扣',hasIcon:false}, | 75 | {current:3,text:'折扣',hasIcon:false}, |
| 76 | {current:4,text:'筛选',hasIcon:true}, | 76 | {current:4,text:'筛选',hasIcon:true}, |
| 77 | ], | 77 | ], |
| 78 | current: 0, | 78 | current: 0, |
| 79 | showRight: false, | 79 | showRight: false, |
| 80 | indexArr:'', | 80 | indexArr:'', |
| 81 | valueArr:'', | 81 | valueArr:'', |
| 82 | //商品数据 | 82 | //商品数据 |
| 83 | goodsList:[ | 83 | goodsList:[ |
| 84 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 84 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 85 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 85 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 86 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 86 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 87 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 87 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 88 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 88 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 89 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 89 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 90 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 90 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 91 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 91 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 92 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 92 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 93 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 93 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 94 | ], | 94 | ], |
| 95 | loadingText:"正在加载...", | 95 | loadingText:"正在加载...", |
| 96 | filterDropdownValue:[], | 96 | filterDropdownValue:[], |
| 97 | filterData:[] | 97 | filterData:[] |
| 98 | } | 98 | } |
| 99 | }, | 99 | }, |
| 100 | filters: { | 100 | filters: { |
| 101 | outData(value) { | 101 | outData(value) { |
| 102 | return JSON.stringify(value); | 102 | return JSON.stringify(value); |
| 103 | } | 103 | } |
| 104 | }, | 104 | }, |
| 105 | onLoad: function () { | 105 | onLoad: function () { |
| 106 | //定时器模拟ajax异步请求数据 | 106 | //定时器模拟ajax异步请求数据 |
| 107 | // setTimeout(()=>{ | 107 | // setTimeout(()=>{ |
| 108 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null | 108 | // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null |
| 109 | // this.filterDropdownValue = [ | 109 | // this.filterDropdownValue = [ |
| 110 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 | 110 | // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 |
| 111 | // [null,null], //第1个菜单选中 都不选中 | 111 | // [null,null], //第1个菜单选中 都不选中 |
| 112 | // [1], //第2个菜单选中 一级菜单的第1项 | 112 | // [1], //第2个菜单选中 一级菜单的第1项 |
| 113 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 | 113 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 |
| 114 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 | 114 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 |
| 115 | // ]; | 115 | // ]; |
| 116 | this.filterData = data; | 116 | this.filterData = data; |
| 117 | // },100); | 117 | // },100); |
| 118 | // 模拟ajax请求子菜单数据。 | 118 | // 模拟ajax请求子菜单数据。 |
| 119 | // setTimeout(()=>{ | 119 | // setTimeout(()=>{ |
| 120 | // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; | 120 | // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; |
| 121 | // },5000) | 121 | // },5000) |
| 122 | }, | 122 | }, |
| 123 | methods: { | 123 | methods: { |
| 124 | showDrawer(e) { | 124 | showDrawer(e) { |
| 125 | this.$refs[e].open() | 125 | this.$refs[e].open() |
| 126 | }, | 126 | }, |
| 127 | closeDrawer(e) { | 127 | closeDrawer(e) { |
| 128 | this.$refs[e].close() | 128 | this.$refs[e].close() |
| 129 | }, | 129 | }, |
| 130 | change(e, type) { | 130 | change(e, type) { |
| 131 | this[type] = e | 131 | this[type] = e |
| 132 | }, | 132 | }, |
| 133 | onClickItem(e) { | 133 | onClickItem(e) { |
| 134 | if (this.current !== e) { | 134 | if (this.current !== e) { |
| 135 | this.current = e; | 135 | this.current = e; |
| 136 | } | 136 | } |
| 137 | }, | 137 | }, |
| 138 | dropDown(){ | 138 | dropDown(){ |
| 139 | console.log('下拉') | 139 | console.log('下拉') |
| 140 | }, | 140 | }, |
| 141 | //接收菜单结果 | 141 | //接收菜单结果 |
| 142 | confirm(e){ | 142 | confirm(e){ |
| 143 | this.indexArr = e.index; | 143 | this.indexArr = e.index; |
| 144 | this.valueArr = e.value; | 144 | this.valueArr = e.value; |
| 145 | return; | 145 | return; |
| 146 | console.log('修改菜单'); | 146 | console.log('修改菜单'); |
| 147 | this.filterData[4].submenu[1] = { | 147 | this.filterData[4].submenu[1] = { |
| 148 | "name": "项目2", | 148 | "name": "项目2", |
| 149 | "submenu": [ | 149 | "submenu": [ |
| 150 | 150 | ||
| 151 | ] | 151 | ] |
| 152 | } | 152 | } |
| 153 | }, | 153 | }, |
| 154 | toGoods(id){ | 154 | toGoods(id){ |
| 155 | console.log(id) | 155 | console.log(id) |
| 156 | } | 156 | } |
| 157 | }, | 157 | }, |
| 158 | onNavigationBarButtonTap(e) { | 158 | onNavigationBarButtonTap(e) { |
| 159 | this.showRight = !this.showRight | 159 | this.showRight = !this.showRight |
| 160 | }, | 160 | }, |
| 161 | //上拉加载， | 161 | //上拉加载， |
| 162 | onReachBottom(){ | 162 | onReachBottom(){ |
| 163 | console.log('到底加载') | 163 | console.log('到底加载') |
| 164 | let len = this.goodsList.length; | 164 | let len = this.goodsList.length; |
| 165 | if(len>=30){ | 165 | if(len>=30){ |
| 166 | this.loadingText="~~到底了~~"; | 166 | this.loadingText="~~到底了~~"; |
| 167 | return false; | 167 | return false; |
| 168 | }else{ | 168 | }else{ |
| 169 | this.loadingText="正在加载..."; | 169 | this.loadingText="正在加载..."; |
| 170 | } | 170 | } |
| 171 | let end_goods_id = this.goodsList[len-1].goods_id; | 171 | let end_goods_id = this.goodsList[len-1].goods_id; |
| 172 | for(let i=1;i<=10;i++){ | 172 | for(let i=1;i<=10;i++){ |
| 173 | let goods_id = end_goods_id+i; | 173 | let goods_id = end_goods_id+i; |
| 174 | let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; | 174 | let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' }; |
| 175 | this.goodsList.push(p); | 175 | this.goodsList.push(p); |
| 176 | } | 176 | } |
| 177 | }, | 177 | }, |
| 178 | } | 178 | } |
| 179 | </script> | 179 | </script> |
| 180 | 180 | ||
| 181 | <style lang="scss"> | 181 | <style lang="scss"> |
| 182 | .content { | 182 | .content { |
| 183 | display: flex; | 183 | display: flex; |
| 184 | flex-direction: column; | 184 | flex-direction: column; |
| 185 | align-items: center; | 185 | align-items: center; |
| 186 | justify-content: center; | 186 | justify-content: center; |
| 187 | background-color: #F7F6F6; | 187 | background-color: #F7F6F6; |
| 188 | } | 188 | } |
| 189 | .header{ | 189 | .header{ |
| 190 | display: flex; | 190 | display: flex; |
| 191 | flex-direction: column; | 191 | flex-direction: column; |
| 192 | align-items: center; | 192 | align-items: center; |
| 193 | justify-content: center; | 193 | justify-content: center; |
| 194 | background-color: #F7F6F6; | 194 | background-color: #F7F6F6; |
| 195 | height:178rpx ; | 195 | height:178rpx ; |
| 196 | width: 100%; | 196 | width: 100%; |
| 197 | z-index: 999; | 197 | z-index: 999; |
| 198 | position: fixed; | 198 | position: fixed; |
| 199 | top: 0; | 199 | top: 0; |
| 200 | left: 0; | 200 | left: 0; |
| 201 | } | 201 | } |
| 202 | .searchBar { | 202 | .searchBar { |
| 203 | width: 670rpx; | 203 | width: 670rpx; |
| 204 | display: flex; | 204 | display: flex; |
| 205 | justify-content: center; | 205 | justify-content: center; |
| 206 | align-items: center; | 206 | align-items: center; |
| 207 | box-sizing: border-box; | 207 | box-sizing: border-box; |
| 208 | padding: 0rpx 16rpx; | 208 | padding: 0rpx 16rpx; |
| 209 | border: 1px solid #FF6B4A; | 209 | border: 1px solid #FF6B4A; |
| 210 | border-radius: 8rpx; | 210 | border-radius: 8rpx; |
| 211 | background-color: #ffffff; | 211 | background-color: #ffffff; |
| 212 | } | 212 | } |
| 213 | 213 | ||
| 214 | .searchIpt { | 214 | .searchIpt { |
| 215 | height: 68rpx; | 215 | height: 68rpx; |
| 216 | width: 670rpx; | 216 | width: 670rpx; |
| 217 | padding: 16rpx; | 217 | padding: 16rpx; |
| 218 | font-size: 28rpx; | 218 | font-size: 28rpx; |
| 219 | box-sizing: border-box; | 219 | box-sizing: border-box; |
| 220 | } | 220 | } |
| 221 | .screenBar{ | 221 | .screenBar{ |
| 222 | width: 670rpx; | 222 | width: 670rpx; |
| 223 | height: 110rpx; | 223 | height: 110rpx; |
| 224 | display: flex; | 224 | display: flex; |
| 225 | flex-direction: row; | 225 | flex-direction: row; |
| 226 | justify-content: space-between; | 226 | justify-content: space-between; |
| 227 | align-items: center; | 227 | align-items: center; |
| 228 | color: #333333; | 228 | color: #333333; |
| 229 | font-size: 32rpx; | 229 | font-size: 32rpx; |
| 230 | } | 230 | } |
| 231 | .active{ | 231 | .active{ |
| 232 | color: #FF6B4A; | 232 | color: #FF6B4A; |
| 233 | } | 233 | } |
| 234 | .screenItem{ | 234 | .screenItem{ |
| 235 | display: flex; | 235 | display: flex; |
| 236 | justify-content: center; | 236 | justify-content: center; |
| 237 | align-items: center; | 237 | align-items: center; |
| 238 | } | 238 | } |
| 239 | .content-wrap{ | 239 | .content-wrap{ |
| 240 | width: 100%; | 240 | width: 100%; |
| 241 | background-color: #FFFFFF; | 241 | background-color: #FFFFFF; |
| 242 | } | 242 | } |
| 243 | 243 | ||
| 244 | .HMfilterDropdown{ | 244 | .HMfilterDropdown{ |
| 245 | top: 178rpx !important; | 245 | top: 178rpx !important; |
| 246 | } | 246 | } |
| 247 | 247 | ||
| 248 | .goods-list{ | 248 | .goods-list{ |
| 249 | padding-top: 286rpx; | 249 | padding-top: 286rpx; |
| 250 | .loading-text{ | 250 | .loading-text{ |
| 251 | width: 100%; | 251 | width: 100%; |
| 252 | display: flex; | 252 | display: flex; |
| 253 | justify-content: center; | 253 | justify-content: center; |
| 254 | align-items: center; | 254 | align-items: center; |
| 255 | height: 30px; | 255 | height: 30px; |
| 256 | color: #979797; | 256 | color: #979797; |
| 257 | font-size: 12px; | 257 | font-size: 12px; |
| 258 | } | 258 | } |
| 259 | .product-list{ | 259 | .product-list{ |
| 260 | width: 92%; | 260 | width: 92%; |
| 261 | padding: 0 4% 3vw 4%; | 261 | padding: 0 4% 3vw 4%; |
| 262 | display: flex; | 262 | display: flex; |
| 263 | justify-content: space-between; | 263 | justify-content: space-between; |
| 264 | flex-wrap: wrap; | 264 | flex-wrap: wrap; |
| 265 | .product{ | 265 | .product{ |
| 266 | width: 48%; | 266 | width: 48%; |
| 267 | border-radius: 10px; | 267 | border-radius: 10px; |
| 268 | background-color: #fff; | 268 | background-color: #fff; |
| 269 | margin: 0 0 7px 0; | 269 | margin: 0 0 7px 0; |
| 270 | box-shadow: 0 3px 12px rgba(0,0,0,0.1); | 270 | box-shadow: 0 3px 12px rgba(0,0,0,0.1); |
| 271 | image{ | 271 | image{ |
| 272 | width: 100%; | 272 | width: 100%; |
| 273 | border-radius: 10px 10px 0 0; | 273 | border-radius: 10px 10px 0 0; |
| 274 | height: 184rpx; | 274 | height: 184rpx; |
| 275 | } | 275 | } |
| 276 | .name{ | 276 | .name{ |
| 277 | width: 92%; | 277 | width: 92%; |
| 278 | padding: 5px 4%; | 278 | padding: 5px 4%; |
| 279 | display: -webkit-box; | 279 | display: -webkit-box; |
| 280 | -webkit-box-orient: vertical; | 280 | -webkit-box-orient: vertical; |
| 281 | -webkit-line-clamp: 2; | 281 | -webkit-line-clamp: 2; |
| 282 | text-align: justify; | 282 | text-align: justify; |
| 283 | overflow: hidden; | 283 | overflow: hidden; |
| 284 | font-size: 24rpx; | 284 | font-size: 24rpx; |
| 285 | color: #333333; | 285 | color: #333333; |
| 286 | } | 286 | } |
| 287 | .info{ | 287 | .info{ |
| 288 | display: flex; | 288 | display: flex; |
| 289 | justify-content: space-between; | 289 | justify-content: space-between; |
| 290 | align-items: center; | 290 | align-items: center; |
| 291 | width: 92%; | 291 | width: 92%; |
| 292 | padding: 5px 4% 5px 4%; | 292 | padding: 5px 4% 5px 4%; |
| 293 | .priceBox{ | 293 | .priceBox{ |
| 294 | display: flex; | 294 | display: flex; |
| 295 | justify-content: space-between; | 295 | justify-content: space-between; |
| 296 | align-items: center; | 296 | align-items: center; |
| 297 | .price{ | 297 | .price{ |
| 298 | color: #EB5D3B; | 298 | color: #EB5D3B; |
| 299 | font-size: 28rpx; | 299 | font-size: 28rpx; |
| 300 | font-weight: 600; | 300 | font-weight: 600; |
| 301 | margin-right: 10rpx; | 301 | margin-right: 10rpx; |
| 302 | } | 302 | } |
| 303 | .originCost{ | 303 | .originCost{ |
| 304 | text-decoration:line-through; | 304 | text-decoration:line-through; |
| 305 | color: #999999; | 305 | color: #999999; |
| 306 | font-size: 20rpx; | 306 | font-size: 20rpx; |
| 307 | } | 307 | } |
| 308 | 308 | ||
| 309 | } | 309 | } |
| 310 | .slogan{ | 310 | .slogan{ |
| 311 | color: #999999; | 311 | color: #999999; |
| 312 | font-size: 20rpx; | 312 | font-size: 20rpx; |
| 313 | } | 313 | } |
| 314 | } | 314 | } |
| 315 | } | 315 | } |
| 316 | } | 316 | } |
| 317 | } | 317 | } |
| 318 | 318 | ||
| 319 | </style> | 319 | </style> |
| 320 | 320 |