Commit 72a08fa450bc05ccb979d4e8a71d1f9add25189d
1 parent
fb85b244cf
Exists in
master
icon
Showing
5 changed files
with
92 additions
and
2 deletions
Show diff stats
src/pages.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 2 | "pages": [ |
| 3 | { | ||
| 4 | "path" : "pages/myOrder/myOrder", | ||
| 5 | "style" : { | ||
| 6 | "navigationBarTitleText": "我的订单"} | ||
| 7 | }, | ||
| 3 | { | 8 | { |
| 4 | "path": "pages/index/index", | 9 | "path": "pages/index/index", |
| 5 | "style": { | 10 | "style": { |
| 6 | "navigationBarTitleText": "商城一览" | 11 | "navigationBarTitleText": "商城一览" |
| 7 | // "enablePullDownRefresh":true | 12 | // "enablePullDownRefresh":true |
| 8 | } | 13 | } |
| 9 | }, | 14 | }, |
| 10 | { | 15 | { |
| 11 | "path": "pages/addArddess/addArddess", | 16 | "path": "pages/addArddess/addArddess", |
| 12 | "style": { | 17 | "style": { |
| 13 | "navigationBarTitleText": "新增地址" | 18 | "navigationBarTitleText": "新增地址" |
| 14 | } | 19 | } |
| 15 | }, | 20 | }, |
| 16 | { | 21 | { |
| 17 | "path" : "pages/confirmOrder/confirmOrder", | 22 | "path" : "pages/confirmOrder/confirmOrder", |
| 18 | "style" : { | 23 | "style" : { |
| 19 | "navigationBarTitleText": "确认订单"} | 24 | "navigationBarTitleText": "确认订单"} |
| 20 | }, | 25 | }, |
| 21 | { | 26 | { |
| 22 | "path": "pages/cart/cart", | 27 | "path": "pages/cart/cart", |
| 23 | "style": { | 28 | "style": { |
| 24 | "navigationBarTitleText": "购物车" | 29 | "navigationBarTitleText": "购物车" |
| 25 | } | 30 | } |
| 26 | }, | 31 | }, |
| 27 | { | 32 | { |
| 28 | "path": "pages/user/user", | 33 | "path": "pages/user/user", |
| 29 | "style": { | 34 | "style": { |
| 30 | "navigationBarTitleText": "我的" | 35 | "navigationBarTitleText": "我的" |
| 31 | } | 36 | } |
| 32 | }, | 37 | }, |
| 33 | { | 38 | { |
| 34 | "path": "pages/details-3/details-3" | 39 | "path": "pages/details-3/details-3" |
| 35 | }, | 40 | }, |
| 36 | { | 41 | { |
| 37 | "path": "pages/detail/detail" | 42 | "path": "pages/detail/detail" |
| 38 | } | 43 | } |
| 39 | ], | 44 | ], |
| 40 | "globalStyle": { | 45 | "globalStyle": { |
| 41 | "navigationBarTextStyle": "black", | 46 | "navigationBarTextStyle": "black", |
| 42 | "navigationBarTitleText": "uni-app", | 47 | "navigationBarTitleText": "uni-app", |
| 43 | "navigationBarBackgroundColor": "#F8F8F8", | 48 | "navigationBarBackgroundColor": "#F8F8F8", |
| 44 | "backgroundColor": "#F8F8F8" | 49 | "backgroundColor": "#F8F8F8" |
| 45 | }, | 50 | }, |
| 46 | "tabBar": { | 51 | "tabBar": { |
| 47 | "color": "#C0C4CC", | 52 | "color": "#C0C4CC", |
| 48 | "selectedColor": "#fa436a", | 53 | "selectedColor": "#fa436a", |
| 49 | "borderStyle": "black", | 54 | "borderStyle": "black", |
| 50 | "backgroundColor": "#ffffff", | 55 | "backgroundColor": "#ffffff", |
| 51 | "list": [{ | 56 | "list": [{ |
| 52 | "pagePath": "pages/index/index", | 57 | "pagePath": "pages/index/index", |
| 53 | "iconPath": "static/tab-home.png", | 58 | "iconPath": "static/tab-home.png", |
| 54 | "selectedIconPath": "static/tab-home-current.png", | 59 | "selectedIconPath": "static/tab-home-current.png", |
| 55 | "text": "首页" | 60 | "text": "首页" |
| 56 | }, | 61 | }, |
| 57 | { | 62 | { |
| 58 | "pagePath": "pages/cart/cart", | 63 | "pagePath": "pages/cart/cart", |
| 59 | "iconPath": "static/tab-cart.png", | 64 | "iconPath": "static/tab-cart.png", |
| 60 | "selectedIconPath": "static/tab-cart-current.png", | 65 | "selectedIconPath": "static/tab-cart-current.png", |
| 61 | "text": "购物车" | 66 | "text": "购物车" |
| 62 | }, | 67 | }, |
| 63 | { | 68 | { |
| 64 | "pagePath": "pages/user/user", | 69 | "pagePath": "pages/user/user", |
| 65 | "iconPath": "static/tab-my.png", | 70 | "iconPath": "static/tab-my.png", |
| 66 | "selectedIconPath": "static/tab-my-current.png", | 71 | "selectedIconPath": "static/tab-my-current.png", |
| 67 | "text": "我的" | 72 | "text": "我的" |
| 68 | } | 73 | } |
| 69 | ] | 74 | ] |
| 70 | } | 75 | } |
| 71 | } | 76 | } |
| 72 | 77 |
src/pages/myOrder/myOrder.vue
| File was created | 1 | <template> | |
| 2 | <view class="content"> | ||
| 3 | <view class="header"> | ||
| 4 | <!-- 搜索--> | ||
| 5 | <view class="searchBar"> | ||
| 6 | <icon class="searchIcon" type="search" size="14"></icon> | ||
| 7 | <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> | ||
| 8 | </view> | ||
| 9 | |||
| 10 | </view> | ||
| 11 | |||
| 12 | </view> | ||
| 13 | </template> | ||
| 14 | |||
| 15 | <script> | ||
| 16 | export default { | ||
| 17 | data() { | ||
| 18 | return { | ||
| 19 | |||
| 20 | }; | ||
| 21 | } | ||
| 22 | } | ||
| 23 | </script> | ||
| 24 | |||
| 25 | <style lang="scss"> | ||
| 26 | .content { | ||
| 27 | display: flex; | ||
| 28 | flex-direction: column; | ||
| 29 | align-items: center; | ||
| 30 | background-color: #F7F6F6; | ||
| 31 | height: 100vh; | ||
| 32 | } | ||
| 33 | .header{ | ||
| 34 | background-color: #ffffff; | ||
| 35 | width: 100%; | ||
| 36 | height: 232rpx; | ||
| 37 | padding: 40rpx 40rpx 36rpx 40rpx; | ||
| 38 | box-sizing: border-box; | ||
| 39 | .searchBar { | ||
| 40 | width: 670rpx; | ||
| 41 | display: flex; | ||
| 42 | justify-content: center; | ||
| 43 | align-items: center; | ||
| 44 | box-sizing: border-box; | ||
| 45 | padding: 0rpx 16rpx; | ||
| 46 | border: 1px solid #FF6B4A; | ||
| 47 | border-radius: 8rpx; | ||
| 48 | background-color: #ffffff; | ||
| 49 | } | ||
| 50 | |||
| 51 | .searchIpt { | ||
| 52 | height: 68rpx; | ||
| 53 | width: 670rpx; | ||
| 54 | padding: 16rpx; | ||
| 55 | font-size: 28rpx; | ||
| 56 | box-sizing: border-box; | ||
| 57 | } | ||
| 58 | } | ||
| 59 | </style> | ||
| 60 |
src/pages/myOrder/orderCard.vue
| File was created | 1 | <template> | |
| 2 | <view> | ||
| 3 | |||
| 4 | </view> | ||
| 5 | </template> | ||
| 6 | |||
| 7 | <script> | ||
| 8 | export default { | ||
| 9 | data() { | ||
| 10 | return { | ||
| 11 | |||
| 12 | }; | ||
| 13 | } | ||
| 14 | } | ||
| 15 | </script> | ||
| 16 | |||
| 17 | <style lang="scss"> | ||
| 18 | |||
| 19 | </style> | ||
| 20 |
src/pages/user/user.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="wrap"> | 2 | <view class="wrap"> |
| 3 | <view class="content"> | 3 | <view class="content"> |
| 4 | <view class="userInfo"> | 4 | <view class="userInfo"> |
| 5 | <view class="info"> | 5 | <view class="info"> |
| 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> | 6 | <image src="../../static/img/detail/d10.png" mode="aspectFill"></image> |
| 7 | <view class="infoText"> | 7 | <view class="infoText"> |
| 8 | <text class="userName">{{userName}}</text> | 8 | <text class="userName">{{userName}}</text> |
| 9 | <text class="nickName">用户名：骆驼不死的祥子</text> | 9 | <text class="nickName">用户名：骆驼不死的祥子</text> |
| 10 | </view> | 10 | </view> |
| 11 | </view> | 11 | </view> |
| 12 | <view class="service"> | 12 | <view class="service"> |
| 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> | 13 | <image src="../../static/serviceLogo.png" mode="aspectFill"></image> |
| 14 | </view> | 14 | </view> |
| 15 | </view> | 15 | </view> |
| 16 | <view class="myOrder"> | 16 | <view class="myOrder"> |
| 17 | <view class="orderHeader"> | 17 | <view class="orderHeader"> |
| 18 | <text>全部订单</text> | 18 | <text>全部订单</text> |
| 19 | <view class="btn"> | 19 | <view class="btn" @click="toMyOrder"> |
| 20 | 全部 | 20 | 全部 |
| 21 | <image src="../../static/right.png" mode="aspectFill"></image> | 21 | <image src="../../static/right.png" mode="aspectFill"></image> |
| 22 | </view> | 22 | </view> |
| 23 | </view> | 23 | </view> |
| 24 | <view class="orderBody"> | 24 | <view class="orderBody"> |
| 25 | <view class="item,waitPay"> | 25 | <view class="item,waitPay"> |
| 26 | <image src="../../static/waitPay.png" mode="aspectFill"></image> | 26 | <image src="../../static/waitPay.png" mode="aspectFill"></image> |
| 27 | <text>待付款</text> | 27 | <text>待付款</text> |
| 28 | </view> | 28 | </view> |
| 29 | <view class="item,waitDeliver"> | 29 | <view class="item,waitDeliver"> |
| 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> | 30 | <image src="../../static/waitDeliver.png" mode="aspectFill"></image> |
| 31 | <text>待发货</text> | 31 | <text>待发货</text> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="item,waitReceive"> | 33 | <view class="item,waitReceive"> |
| 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> | 34 | <image src="../../static/waitReceive.png" mode="aspectFill"></image> |
| 35 | <text>待收货</text> | 35 | <text>待收货</text> |
| 36 | </view> | 36 | </view> |
| 37 | <view class="item,service"> | 37 | <view class="item,service"> |
| 38 | <image src="../../static/service.png" mode="aspectFill"></image> | 38 | <image src="../../static/service.png" mode="aspectFill"></image> |
| 39 | <text>退换/售后</text> | 39 | <text>退换/售后</text> |
| 40 | </view> | 40 | </view> |
| 41 | </view> | 41 | </view> |
| 42 | </view> | 42 | </view> |
| 43 | <view class="recommend"> | 43 | <view class="recommend"> |
| 44 | <view class="title"> | 44 | <view class="title"> |
| 45 | <view class="line"></view> | 45 | <view class="line"></view> |
| 46 | <view class="text">精选推荐</view> | 46 | <view class="text">精选推荐</view> |
| 47 | <view class="line"></view> | 47 | <view class="line"></view> |
| 48 | </view> | 48 | </view> |
| 49 | <!-- 商品列表 --> | 49 | <!-- 商品列表 --> |
| 50 | <view class="goods-list"> | 50 | <view class="goods-list"> |
| 51 | <view class="product-list"> | 51 | <view class="product-list"> |
| 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> | 52 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)"> |
| 53 | <Card :goods = "goods"></Card> | 53 | <Card :goods = "goods"></Card> |
| 54 | </view> | 54 | </view> |
| 55 | </view> | 55 | </view> |
| 56 | <view class="loading-text">{{loadingText}}</view> | 56 | <view class="loading-text">{{loadingText}}</view> |
| 57 | </view> | 57 | </view> |
| 58 | </view> | 58 | </view> |
| 59 | </view> | 59 | </view> |
| 60 | 60 | ||
| 61 | </view> | 61 | </view> |
| 62 | </template> | 62 | </template> |
| 63 | 63 | ||
| 64 | <script> | 64 | <script> |
| 65 | import Card from "../../components/Card/Card.vue" | 65 | import Card from "../../components/Card/Card.vue" |
| 66 | export default { | 66 | export default { |
| 67 | components: { | 67 | components: { |
| 68 | 'Card':Card | 68 | 'Card':Card |
| 69 | }, | 69 | }, |
| 70 | data() { | 70 | data() { |
| 71 | return { | 71 | return { |
| 72 | 72 | ||
| 73 | //商品数据 | 73 | //商品数据 |
| 74 | goodsList:[ | 74 | goodsList:[ |
| 75 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 75 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 76 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 77 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 78 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 79 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 80 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 81 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 82 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, | 83 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, |
| 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } | 84 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } |
| 85 | ], | 85 | ], |
| 86 | headerphoto:'', | 86 | headerphoto:'', |
| 87 | userName:'Adam' | 87 | userName:'Adam' |
| 88 | } | 88 | } |
| 89 | }, | 89 | }, |
| 90 | onLoad() { | 90 | onLoad() { |
| 91 | 91 | ||
| 92 | }, | 92 | }, |
| 93 | methods: { | 93 | methods: { |
| 94 | 94 | toMyOrder(){ | |
| 95 | uni.navigateTo({ | ||
| 96 | url: '../myOrder/myOrder', | ||
| 97 | success: res => {}, | ||
| 98 | fail: () => {}, | ||
| 99 | complete: () => {} | ||
| 100 | }); | ||
| 101 | } | ||
| 95 | } | 102 | } |
| 96 | } | 103 | } |
| 97 | </script> | 104 | </script> |
| 98 | 105 | ||
| 99 | <style lang="scss"> | 106 | <style lang="scss"> |
| 100 | .warp{ | 107 | .warp{ |
| 101 | font-size: 24rpx; | 108 | font-size: 24rpx; |
| 102 | background-color: #f2f2f2; | 109 | background-color: #f2f2f2; |
| 103 | height: 100vh; | 110 | height: 100vh; |
| 104 | } | 111 | } |
| 105 | .content { | 112 | .content { |
| 106 | display: flex; | 113 | display: flex; |
| 107 | flex-direction: column; | 114 | flex-direction: column; |
| 108 | align-items: center; | 115 | align-items: center; |
| 109 | justify-content: center; | 116 | justify-content: center; |
| 110 | background-color: #F2F2F2; | 117 | background-color: #F2F2F2; |
| 111 | } | 118 | } |
| 112 | .userInfo{ | 119 | .userInfo{ |
| 113 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); | 120 | background-image: linear-gradient(270deg, #FFA481 0%, #FF6B4A 66%); |
| 114 | width: 100%; | 121 | width: 100%; |
| 115 | height: 240rpx; | 122 | height: 240rpx; |
| 116 | color: #FFFFFF; | 123 | color: #FFFFFF; |
| 117 | padding: 60rpx 82rpx 80rpx 44rpx; | 124 | padding: 60rpx 82rpx 80rpx 44rpx; |
| 118 | box-sizing: border-box; | 125 | box-sizing: border-box; |
| 119 | display: flex; | 126 | display: flex; |
| 120 | flex-direction: row; | 127 | flex-direction: row; |
| 121 | justify-content: space-between; | 128 | justify-content: space-between; |
| 122 | align-items: flex-start; | 129 | align-items: flex-start; |
| 123 | .info{ | 130 | .info{ |
| 124 | display: flex; | 131 | display: flex; |
| 125 | flex-direction: row; | 132 | flex-direction: row; |
| 126 | justify-content: space-between; | 133 | justify-content: space-between; |
| 127 | align-items: center; | 134 | align-items: center; |
| 128 | image{ | 135 | image{ |
| 129 | border-radius: 50rpx; | 136 | border-radius: 50rpx; |
| 130 | height: 100rpx ; | 137 | height: 100rpx ; |
| 131 | width: 100rpx; | 138 | width: 100rpx; |
| 132 | margin-right: 40rpx; | 139 | margin-right: 40rpx; |
| 133 | } | 140 | } |
| 134 | .infoText{ | 141 | .infoText{ |
| 135 | display: flex; | 142 | display: flex; |
| 136 | flex-direction: column; | 143 | flex-direction: column; |
| 137 | justify-content: space-between; | 144 | justify-content: space-between; |
| 138 | align-items: flex-scetart; | 145 | align-items: flex-scetart; |
| 139 | .userName{ | 146 | .userName{ |
| 140 | font-size: 18px; | 147 | font-size: 18px; |
| 141 | color: #FFFFFF; | 148 | color: #FFFFFF; |
| 142 | margin-bottom: 8rpx; | 149 | margin-bottom: 8rpx; |
| 143 | } | 150 | } |
| 144 | .nickName{ | 151 | .nickName{ |
| 145 | font-size: 12px; | 152 | font-size: 12px; |
| 146 | color: #FFFFFF; | 153 | color: #FFFFFF; |
| 147 | } | 154 | } |
| 148 | } | 155 | } |
| 149 | } | 156 | } |
| 150 | .service{ | 157 | .service{ |
| 151 | image{ | 158 | image{ |
| 152 | height: 36rpx; | 159 | height: 36rpx; |
| 153 | width: 36rpx; | 160 | width: 36rpx; |
| 154 | } | 161 | } |
| 155 | } | 162 | } |
| 156 | } | 163 | } |
| 157 | .myOrder{ | 164 | .myOrder{ |
| 158 | width: 100%; | 165 | width: 100%; |
| 159 | height: 296rpx; | 166 | height: 296rpx; |
| 160 | margin-top: 20rpx; | 167 | margin-top: 20rpx; |
| 161 | margin-bottom: 20rpx; | 168 | margin-bottom: 20rpx; |
| 162 | padding: 0 40rpx; | 169 | padding: 0 40rpx; |
| 163 | box-sizing: border-box; | 170 | box-sizing: border-box; |
| 164 | background: #FFFFFF; | 171 | background: #FFFFFF; |
| 165 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 172 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 166 | border-radius: 6px; | 173 | border-radius: 6px; |
| 167 | border-radius: 6px; | 174 | border-radius: 6px; |
| 168 | display: flex; | 175 | display: flex; |
| 169 | flex-direction: column; | 176 | flex-direction: column; |
| 170 | justify-content: space-around; | 177 | justify-content: space-around; |
| 171 | align-items: center; | 178 | align-items: center; |
| 172 | .orderHeader{ | 179 | .orderHeader{ |
| 173 | width: 100%; | 180 | width: 100%; |
| 174 | height: 100rpx; | 181 | height: 100rpx; |
| 175 | display: flex; | 182 | display: flex; |
| 176 | flex-direction: row; | 183 | flex-direction: row; |
| 177 | justify-content: space-between; | 184 | justify-content: space-between; |
| 178 | align-items: center; | 185 | align-items: center; |
| 179 | border-bottom: 1px solid #E9E9E9;; | 186 | border-bottom: 1px solid #E9E9E9;; |
| 180 | font-weight: bold; | 187 | font-weight: bold; |
| 181 | font-size: 18px; | 188 | font-size: 18px; |
| 182 | color: #333333; | 189 | color: #333333; |
| 183 | .btn{ | 190 | .btn{ |
| 184 | font-size: 12px; | 191 | font-size: 12px; |
| 185 | color: #999999; | 192 | color: #999999; |
| 186 | image{ | 193 | image{ |
| 187 | margin-left: 20rpx; | 194 | margin-left: 20rpx; |
| 188 | height: 16rpx; | 195 | height: 16rpx; |
| 189 | width: 8rpx; | 196 | width: 8rpx; |
| 190 | } | 197 | } |
| 191 | } | 198 | } |
| 192 | } | 199 | } |
| 193 | .orderBody{ | 200 | .orderBody{ |
| 194 | width: 100%; | 201 | width: 100%; |
| 195 | display: flex; | 202 | display: flex; |
| 196 | flex-direction: row; | 203 | flex-direction: row; |
| 197 | justify-content: space-between; | 204 | justify-content: space-between; |
| 198 | align-items: center; | 205 | align-items: center; |
| 199 | .item{ | 206 | .item{ |
| 200 | display: flex; | 207 | display: flex; |
| 201 | flex-direction: column; | 208 | flex-direction: column; |
| 202 | align-items: center; | 209 | align-items: center; |
| 203 | image{ | 210 | image{ |
| 204 | width: 46rpx; | 211 | width: 46rpx; |
| 205 | height: 46rpx; | 212 | height: 46rpx; |
| 206 | } | 213 | } |
| 207 | text{ | 214 | text{ |
| 208 | margin-top: 24rpx; | 215 | margin-top: 24rpx; |
| 209 | font-size: 12px; | 216 | font-size: 12px; |
| 210 | color: #333333; | 217 | color: #333333; |
| 211 | } | 218 | } |
| 212 | } | 219 | } |
| 213 | } | 220 | } |
| 214 | } | 221 | } |
| 215 | .recommend{ | 222 | .recommend{ |
| 216 | background: #FFFFFF; | 223 | background: #FFFFFF; |
| 217 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); | 224 | box-shadow: 0 0 4px 0 rgba(133,107,107,0.10); |
| 218 | border-radius: 6px; | 225 | border-radius: 6px; |
| 219 | border-radius: 6px; | 226 | border-radius: 6px; |
| 220 | .title{ | 227 | .title{ |
| 221 | display: flex; | 228 | display: flex; |
| 222 | flex-direction: row; | 229 | flex-direction: row; |
| 223 | align-items: center; | 230 | align-items: center; |
| 224 | justify-content: space-between; | 231 | justify-content: space-between; |
| 225 | padding: 20rpx 40rpx; | 232 | padding: 20rpx 40rpx; |
| 226 | .line{ | 233 | .line{ |
| 227 | width: 264rpx; | 234 | width: 264rpx; |
| 228 | height: 1rpx; | 235 | height: 1rpx; |
| 229 | border-bottom: 1px solid #EAEAEA; | 236 | border-bottom: 1px solid #EAEAEA; |
| 230 | } | 237 | } |
| 231 | .text{ | 238 | .text{ |
| 232 | font-family: PingFangSC-Medium; | 239 | font-family: PingFangSC-Medium; |
| 233 | font-size: 14px; | 240 | font-size: 14px; |
| 234 | color: #333333; | 241 | color: #333333; |
| 235 | letter-spacing: -0.26px; | 242 | letter-spacing: -0.26px; |
| 236 | text-align: justify; | 243 | text-align: justify; |
| 237 | line-height: 24px; | 244 | line-height: 24px; |
| 238 | } | 245 | } |
| 239 | } | 246 | } |
| 240 | .goods-list{ | 247 | .goods-list{ |
| 241 | .loading-text{ | 248 | .loading-text{ |
| 242 | width: 100%; | 249 | width: 100%; |
| 243 | display: flex; | 250 | display: flex; |
| 244 | justify-content: center; | 251 | justify-content: center; |
| 245 | align-items: center; | 252 | align-items: center; |
| 246 | height: 30px; | 253 | height: 30px; |
| 247 | color: #979797; | 254 | color: #979797; |
| 248 | font-size: 12px; | 255 | font-size: 12px; |
| 249 | } | 256 | } |
| 250 | .product-list{ | 257 | .product-list{ |
| 251 | width: 92%; | 258 | width: 92%; |
| 252 | padding: 0 4% 3vw 4%; | 259 | padding: 0 4% 3vw 4%; |
| 253 | display: flex; | 260 | display: flex; |
| 254 | justify-content: space-between; | 261 | justify-content: space-between; |
| 255 | flex-wrap: wrap; | 262 | flex-wrap: wrap; |
| 256 | .product{ | 263 | .product{ |
| 257 | width: 48%; | 264 | width: 48%; |
| 258 | margin: 0 0 20rpx 0; | 265 | margin: 0 0 20rpx 0; |
| 259 | background: #FFFFFF; | 266 | background: #FFFFFF; |
| 260 | border: 1px solid #F2F2F2; | 267 | border: 1px solid #F2F2F2; |
| 261 | } | 268 | } |
| 262 | } | 269 | } |
| 263 | } | 270 | } |
| 264 | } | 271 | } |
| 265 | 272 | ||
| 266 | </style> | 273 | </style> |
| 267 | 274 |
src/static/detail-tabicon.png
1.22 KB