16 changed files with 875 additions and 760 deletions
Unified View
Diff Options
-
+12 -1api/api.js
-
+44 -41components/config/customerServicePopup.vue
-
+143 -0components/user/productList - 副本.vue
-
+148 -78components/user/productList.vue
-
+233 -0components/user/visualization.vue
-
+1 -3pages.json
-
+9 -1pages/index/center2.vue
-
+6 -6pages/index/index.vue
-
+64 -13pages/index/tradingPlatform.vue
-
+6 -6pages_order/center/systemSet.vue
-
+1 -1pages_order/components/order/myOrderList.vue
-
+16 -14pages_order/components/order/orderList.vue
-
+90 -4pages_order/order/offerOrBillLading.vue
-
+0 -567pages_order/order/orderDetail.vue
-
+93 -23pages_order/order/orderDetail2.vue
-
+9 -2pages_order/tradingPlatform/nowOrder.vue
+ 12
- 1
api/api.js
View File
+ 44
- 41
components/config/customerServicePopup.vue
View File
+ 143
- 0
components/user/productList - 副本.vue
View File
| @ -0,0 +1,143 @@ | |||||
| <template> | |||||
| <view class="list"> | |||||
| <view class="item" v-for="(item, index) in list" | |||||
| @click="immediatePurchase(item)" :key="index"> | |||||
| <image class="image" :src="item.pic" mode="aspectFill"></image> | |||||
| <view class="info"> | |||||
| <view class="title"> | |||||
| {{ $t('other.aluminumProducts') }} | |||||
| </view> | |||||
| <view class="price"> | |||||
| <text>{{item.price}}</text> | |||||
| {{ $t('components.unitPrice2') }} | |||||
| </view> | |||||
| <view class="num"> | |||||
| <!-- 最多批发*快速下单 --> | |||||
| 库存数量：{{ item.num }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn"> | |||||
| <view class="change"> | |||||
| {{ $t('components.immediatePurchase') }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "productList", | |||||
| props: { | |||||
| list: { | |||||
| type: Array, | |||||
| default: false | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 立即购买 | |||||
| immediatePurchase(item) { | |||||
| console.log("====") | |||||
| // var itemStr = encodeURIComponent(JSON.stringify(item)); | |||||
| this.$store.state.productDetail = item | |||||
| uni.navigateTo({ | |||||
| url: `/pages_order/tradingPlatform/nowOrder`, | |||||
| }); | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .list { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| flex-wrap: wrap; | |||||
| .item { | |||||
| position: relative; | |||||
| width: 300rpx; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| border-radius: 20rpx; | |||||
| margin-top: 20rpx; | |||||
| &:nth-child(odd) { | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .image { | |||||
| width: 300rpx; | |||||
| height: 250rpx; | |||||
| border-radius: 20rpx; | |||||
| } | |||||
| .info { | |||||
| font-size: 26rpx; | |||||
| .title { | |||||
| font-size: 30rpx; | |||||
| color: #000; | |||||
| } | |||||
| .price { | |||||
| color: #D03F25; | |||||
| margin-top: 6rpx; | |||||
| text { | |||||
| font-size: 34rpx; | |||||
| font-weight: 900; | |||||
| } | |||||
| } | |||||
| .favorable { | |||||
| display: flex; | |||||
| background-image: url(/static/image/product/favorable.png); | |||||
| background-size: 100% 100%; | |||||
| width: fit-content; | |||||
| padding: 5rpx 10rpx; | |||||
| font-size: 18rpx; | |||||
| margin-top: 6rpx; | |||||
| .p { | |||||
| color: #fff; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| .num { | |||||
| margin-top: 6rpx; | |||||
| font-size: 22rpx; | |||||
| color: #888; | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| position: absolute; | |||||
| right: 0rpx; | |||||
| bottom: 0rpx; | |||||
| padding: 10rpx; | |||||
| border-radius: 50%; | |||||
| //background-color: $uni-color; | |||||
| .change { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| border-radius: 40rpx; | |||||
| color: white; | |||||
| font-size: 22rpx; | |||||
| //margin: 20rpx 10rpx 0 0; | |||||
| padding: 10rpx 10rpx; | |||||
| background: #2b467a; | |||||
| border: 1px solid #757986; | |||||
| //margin-top: 20rpx; | |||||
| //border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 148
- 78
components/user/productList.vue
View File
+ 233
- 0
components/user/visualization.vue
View File
| @ -0,0 +1,233 @@ | |||||
| <template> | |||||
| <view class="visualization"> | |||||
| <uv-tabs :list="tabs" | |||||
| lineColor="#fff" | |||||
| :inactiveStyle="{color : '#aaa', fontSize : '24rpx'}" | |||||
| :activeStyle="{color : '#fff', fontSize : '24rpx'}" | |||||
| @click="clickTabs"></uv-tabs> | |||||
| <div class="chartContainer" | |||||
| ref="chartContainer"></div> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import * as echarts from 'echarts'; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| tabs : [ | |||||
| { | |||||
| name : '长江现货铝均价', | |||||
| }, | |||||
| { | |||||
| name : '国内现货铝均价', | |||||
| }, | |||||
| { | |||||
| name : '国外现货铝均价', | |||||
| }, | |||||
| { | |||||
| name : '伦敦铝均价', | |||||
| }, | |||||
| ], | |||||
| series : [ | |||||
| { | |||||
| name: '长江现货铝均价', | |||||
| type: 'line', | |||||
| data: [], | |||||
| smooth: true, | |||||
| symbol: 'circle', | |||||
| symbolSize: 8, | |||||
| itemStyle: { | |||||
| color: '#4ECDC4' | |||||
| }, | |||||
| lineStyle: { | |||||
| color: '#4ECDC4', | |||||
| width: 2 | |||||
| }, | |||||
| areaStyle: { | |||||
| color: '#4ECDC422' | |||||
| }, | |||||
| }, | |||||
| { | |||||
| name: '国内现货铝均价', | |||||
| type: 'line', | |||||
| data: [], | |||||
| smooth: true, | |||||
| symbol: 'circle', | |||||
| symbolSize: 8, | |||||
| itemStyle: { | |||||
| color: '#ff0' | |||||
| }, | |||||
| lineStyle: { | |||||
| color: '#ff0', | |||||
| width: 2 | |||||
| }, | |||||
| areaStyle: { | |||||
| color: '#ffff0022' | |||||
| }, | |||||
| }, | |||||
| { | |||||
| name: '国外现货铝均价', | |||||
| type: 'line', | |||||
| data: [], | |||||
| smooth: true, | |||||
| symbol: 'circle', | |||||
| symbolSize: 8, | |||||
| itemStyle: { | |||||
| color: '#cd0000' | |||||
| }, | |||||
| lineStyle: { | |||||
| color: '#cd0000', | |||||
| width: 2 | |||||
| }, | |||||
| areaStyle: { | |||||
| color: '#cd000022' | |||||
| }, | |||||
| }, | |||||
| { | |||||
| name: '伦敦铝均价', | |||||
| type: 'line', | |||||
| data: [], | |||||
| smooth: true, | |||||
| symbol: 'circle', | |||||
| symbolSize: 8, | |||||
| itemStyle: { | |||||
| color: '#c800ff' | |||||
| }, | |||||
| lineStyle: { | |||||
| color: '#c800ff', | |||||
| width: 2 | |||||
| }, | |||||
| areaStyle: { | |||||
| color: '#c800ff22' | |||||
| }, | |||||
| }, | |||||
| ], | |||||
| dates : [], | |||||
| index : 0, | |||||
| myChart : null, | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| this.getData() | |||||
| }, | |||||
| methods: { | |||||
| getData(){ | |||||
| this.$api("alpriceNew", res => { | |||||
| if(res.code == 200){ | |||||
| let data = res.result | |||||
| this.dates = data[0].map(n => this.$dayjs(n.priceDate) | |||||
| .format('MM-DD')) | |||||
| this.series.forEach((s, i) => { | |||||
| if(data[i]){ | |||||
| s.data = data[i].map(n => n.price) | |||||
| } | |||||
| }) | |||||
| const chartContainer = this.$refs.chartContainer; | |||||
| if (!chartContainer) { | |||||
| console.error("Chart container not found"); | |||||
| return; | |||||
| } | |||||
| this.myChart = echarts.init(chartContainer); | |||||
| this.initChart() | |||||
| } | |||||
| }) | |||||
| }, | |||||
| initChart(data) { | |||||
| var that = this; | |||||
| let serie = this.series[this.index] | |||||
| // 配置 ECharts | |||||
| const option = { | |||||
| backgroundColor: '#1B263B', | |||||
| title: { | |||||
| text: `${serie.name} ${serie.data[serie.data.length - 1].toFixed(4)}`, | |||||
| right: '10%', | |||||
| top: '10%', | |||||
| textStyle: { | |||||
| color: '#fff', | |||||
| fontSize: 12 | |||||
| } | |||||
| }, | |||||
| // legend: { | |||||
| // data: ['长江铝现货', '国内现货价', '国外现货价'], | |||||
| // textStyle: { | |||||
| // color: '#fff', | |||||
| // fontSize : '9px' | |||||
| // }, | |||||
| // }, | |||||
| tooltip: { | |||||
| trigger: 'axis', | |||||
| formatter: '{c0}', | |||||
| backgroundColor: '#3A506B', | |||||
| textStyle: { | |||||
| color: '#fff', | |||||
| } | |||||
| }, | |||||
| grid: { | |||||
| left: '58px', | |||||
| right: '1%', | |||||
| bottom: '15%' | |||||
| }, | |||||
| xAxis: { | |||||
| type: 'category', | |||||
| data: this.dates, | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| color: '#fff' | |||||
| }, | |||||
| }, | |||||
| axisLabel: { | |||||
| color: '#fff', | |||||
| fontSize : '10px', | |||||
| } | |||||
| }, | |||||
| yAxis: { | |||||
| type: 'value', | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| color: '#fff' | |||||
| } | |||||
| }, | |||||
| axisLabel: { | |||||
| color: '#fff', | |||||
| formatter: function(value) { | |||||
| return value; | |||||
| } | |||||
| } | |||||
| }, | |||||
| series: [this.series[this.index]] | |||||
| }; | |||||
| this.myChart.setOption(option); | |||||
| }, | |||||
| clickTabs(e){ | |||||
| console.log(e); | |||||
| this.index = e.index | |||||
| this.initChart() | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .visualization{ | |||||
| background-color: #1B263B; | |||||
| padding: 20rpx 0; | |||||
| .chartContainer{ | |||||
| width: 100%; | |||||
| height: 300px; | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 1
- 3
pages.json
View File
+ 9
- 1
pages/index/center2.vue
View File
+ 6
- 6
pages/index/index.vue
View File
+ 64
- 13
pages/index/tradingPlatform.vue
View File
+ 6
- 6
pages_order/center/systemSet.vue
View File
+ 1
- 1
pages_order/components/order/myOrderList.vue
View File
+ 16
- 14
pages_order/components/order/orderList.vue
View File
+ 90
- 4
pages_order/order/offerOrBillLading.vue
View File
+ 0
- 567
pages_order/order/orderDetail.vue
View File
| @ -1,567 +0,0 @@ | |||||
| <template> | |||||
| <view> | |||||
| <navbar | |||||
| title="订单详情" | |||||
| leftClick | |||||
| @leftClick="$utils.navigateBack" | |||||
| /> | |||||
| <!-- 水洗店 --> | |||||
| <view class="" | |||||
| v-if="userShop"> | |||||
| <view class="controls"> | |||||
| <view class="title"> | |||||
| <image src="../static/order/icon.png" mode=""></image> | |||||
| 服务完成 | |||||
| </view> | |||||
| <view class="tips"> | |||||
| 待送回 | |||||
| </view> | |||||
| <view class="btns"> | |||||
| <view class="btn1"> | |||||
| 快递寄回 | |||||
| </view> | |||||
| <view class="btn2"> | |||||
| 线下配送 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="steps"> | |||||
| <uv-steps | |||||
| activeColor="#FD5100" | |||||
| :current="stepsCurrent" dot> | |||||
| <uv-steps-item :title="item" | |||||
| :key="index" | |||||
| v-for="(item, index) in steps"></uv-steps-item> | |||||
| </uv-steps> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 酒店和水洗店 --> | |||||
| <view class="info"> | |||||
| <view class="flex" | |||||
| style="display: flex;"> | |||||
| <view style="width: 8rpx;height: 30rpx; | |||||
| background: #FD5100;border-radius: 6rpx;" /> | |||||
| <view class="head-title">服务项目</view> | |||||
| </view> | |||||
| <view class="flex"> | |||||
| <view class="server-item"> | |||||
| <view class="img-box"> | |||||
| <image :src="msgShop.image" mode="aspectFill"></image> | |||||
| </view> | |||||
| <view class="server-info"> | |||||
| <view class="server-title"> | |||||
| {{msgOrder.projectName}} | |||||
| <!-- <view class="coupon">领券立减</view> --> | |||||
| </view> | |||||
| <view class="current-price"> | |||||
| <text class="unit">￥</text>{{msgOrder.money}} | |||||
| </view> | |||||
| <view class="sales-volume" style="margin-top: 5px;"> | |||||
| <view class="desc">规格：{{msgOrder.unit}}</view> | |||||
| </view> | |||||
| <view class="time-coupon"> | |||||
| <!-- <view class="flex"> | |||||
| <image src="@/static/home/time-icon.png"></image> | |||||
| <view class="time">{{msgOrder.useTime}}分钟</view> | |||||
| </view> --> | |||||
| <!-- <view class="sales-volume"> | |||||
| <image src="@/static/icons/icon1.png"></image> | |||||
| <view class="desc">已售出{{msgShop.payNum}}+单</view> | |||||
| </view> --> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- <view class="line min_tips"> | |||||
| <view class="head-div flex"> | |||||
| <view style="width: 118rpx;height: 118rpx;border-radius: 50%;overflow: hidden;"> | |||||
| <image style="width: 118rpx;" :src="msgTechnician.image" mode="widthFix"></image> | |||||
| </view> | |||||
| <view style="padding: 10rpx 34rpx;display: flex;flex-direction: column;justify-content: space-around;"> | |||||
| <view class="nickname"> | |||||
| {{msgTechnician.title}} | |||||
| <view v-if="msgTechnician.isVip" class="tag"> | |||||
| <image src="@/static/order/s.png" mode="aspectFit"></image> | |||||
| <view class="auth">官方认证</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="days"> | |||||
| <van-rate v-model="msgTechnician.score" :size="10" readonly color="#ffb54c" void-icon="star" | |||||
| void-color="#eee" /> | |||||
| <view class=""> | |||||
| 好评{{msgTechnician.pinNum}} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view @click="gototechnicianDetail(msgTechnician)" class="btn-x"> | |||||
| 服务技师 | |||||
| </view> | |||||
| </view> --> | |||||
| <view class="line address"> | |||||
| <view class="address-top"> | |||||
| <!-- <view class=""> | |||||
| 服务地址 | |||||
| </view> --> | |||||
| <view class="copy"> | |||||
| <image @click="copy(msgOrder.name + ' ' + msgOrder.phone + ' ' + msgOrder.address)" src="/static/order/copy.png"></image> | |||||
| </view> | |||||
| </view> | |||||
| <view class="addressDetail"> | |||||
| <view class="">{{msgOrder.name}} {{msgOrder.phone}}</view> | |||||
| <view class="">{{msgOrder.address}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| 实付款 | |||||
| </view> | |||||
| <view class="current-price"> | |||||
| ￥{{ msgOrder.money }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| 租赁费用 | |||||
| </view> | |||||
| <view class=""> | |||||
| ￥{{ msgOrder.price }} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| 水洗费用 | |||||
| </view> | |||||
| <view class=""> | |||||
| ￥{{ msgOrder.price}} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| 押金 | |||||
| </view> | |||||
| <view class=""> | |||||
| ￥{{ msgOrder.price }} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 订单信息 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| 订单信息 | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| 订单编号 | |||||
| </view> | |||||
| <view class=""> | |||||
| {{msgOrder.id}} | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips"> | |||||
| <view class=""> | |||||
| 下单时间 | |||||
| </view> | |||||
| <view class=""> | |||||
| {{msgOrder.createTime}} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 下单须知 --> | |||||
| <view class="line"> | |||||
| <view class="t min_tips"> | |||||
| <view class=""> | |||||
| 下单须知 | |||||
| </view> | |||||
| </view> | |||||
| <view class="min_tips" style="line-height: 40rpx;"> | |||||
| {{msgShop.projectExplain}} | |||||
| </view> | |||||
| <view class="btns"> | |||||
| <view @click="clickService" class="btn"> | |||||
| 联系客服 | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { mapGetters } from 'vuex' | |||||
| export default { | |||||
| computed : { | |||||
| ...mapGetters(['userShop']), | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| stepsCurrent : 0, | |||||
| steps : [ | |||||
| '接单', | |||||
| '检查', | |||||
| '开始清洗', | |||||
| '服务完成', | |||||
| ], | |||||
| msgShop : { | |||||
| money : 99.99, | |||||
| image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
| projectExplain : '1.xxxxxxxxxx xxxxxxxxxx。2.xxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxx。3.。', | |||||
| }, | |||||
| msgOrder : { | |||||
| money : 99.99, | |||||
| address : '广东省广州市越秀区城南故事C3栋2802', | |||||
| name : '李**', | |||||
| phone : '150*****091', | |||||
| unit : '120*40*75【桌子尺寸】', | |||||
| state_dictText : '已完成', | |||||
| price : 199.99, | |||||
| id : '020644568964457', | |||||
| createTime : '2024-01-18 15:39', | |||||
| projectName : '桌布租赁' | |||||
| }, | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .order { | |||||
| background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad); | |||||
| padding-bottom: 10px; | |||||
| } | |||||
| .controls{ | |||||
| margin: 20rpx; | |||||
| background-color: #fff; | |||||
| height: 400rpx; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| width: 710rpx; | |||||
| border-radius: 20rpx; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| .title{ | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| font-size: 40rpx; | |||||
| image{ | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| } | |||||
| .tips{ | |||||
| font-size: 26rpx; | |||||
| color: #FD5100; | |||||
| margin-top: 10rpx; | |||||
| } | |||||
| .btns{ | |||||
| margin-top: 50rpx; | |||||
| display: flex; | |||||
| view{ | |||||
| margin: 0 20rpx; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| color: #fff; | |||||
| background-color: $uni-color; | |||||
| padding: 15rpx 40rpx; | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| .btn2{ | |||||
| background-color: #FFFFFF; | |||||
| border: 1px solid #A7A7A7; | |||||
| color: #A7A7A7; | |||||
| } | |||||
| } | |||||
| } | |||||
| .steps{ | |||||
| margin: 20rpx; | |||||
| background-color: #fff; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| width: 710rpx; | |||||
| border-radius: 20rpx; | |||||
| padding: 70rpx 0; | |||||
| /deep/ .uv-text__value{ | |||||
| font-size: 22rpx !important; | |||||
| } | |||||
| } | |||||
| .box { | |||||
| padding: 20px; | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| margin-top: 10px; | |||||
| .btn { | |||||
| color: #fff; | |||||
| padding: 10rpx 50rpx; | |||||
| background-color: #ffb300; | |||||
| border-radius: 30rpx; | |||||
| font-size: 25rpx; | |||||
| margin-right: 10rpx; | |||||
| } | |||||
| .btc{ | |||||
| background: #ccc; | |||||
| } | |||||
| } | |||||
| } | |||||
| .info { | |||||
| margin: 10px; | |||||
| padding: 20rpx; | |||||
| background-color: #fff; | |||||
| width: calc(100% - 40px); | |||||
| border-radius: 10px; | |||||
| .head-title { | |||||
| font-family: PingFang SC, PingFang SC-Bold; | |||||
| color: #2f2e2e; | |||||
| line-height: 30rpx; | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| .server-item { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| background: white; | |||||
| border-radius: 15rpx; | |||||
| box-sizing: border-box; | |||||
| margin: 20rpx 0rpx; | |||||
| width: 100%; | |||||
| .img-box { | |||||
| width: 150rpx; | |||||
| height: 150rpx; | |||||
| border-radius: 10rpx; | |||||
| overflow: hidden; | |||||
| image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .server-info { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-around; | |||||
| width: calc(100% - 180rpx); | |||||
| box-sizing: border-box; | |||||
| padding: 10rpx 15rpx; | |||||
| .server-title { | |||||
| display: flex; | |||||
| margin-bottom: 10rpx; | |||||
| } | |||||
| .coupon { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| background: #F29E45; | |||||
| color: white; | |||||
| width: 120rpx; | |||||
| height: 40rpx; | |||||
| border-radius: 10rpx; | |||||
| margin-left: 10rpx; | |||||
| font-size: 22rpx; | |||||
| } | |||||
| .time-coupon, | |||||
| .price { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| align-items: center; | |||||
| } | |||||
| .time-coupon { | |||||
| margin: 10rpx 0rpx; | |||||
| font-size: 26rpx; | |||||
| justify-content: space-between; | |||||
| width: 100%; | |||||
| .flex { | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| .time { | |||||
| color: #B8B8B8; | |||||
| margin-left: 6rpx; | |||||
| } | |||||
| } | |||||
| .sales-volume { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| color: #B8B8B8; | |||||
| font-size: 24rpx; | |||||
| image { | |||||
| width: 25rpx; | |||||
| height: 25rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .address { | |||||
| .address-top{ | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| image{ | |||||
| width: 30rpx; | |||||
| height: 30rpx; | |||||
| } | |||||
| } | |||||
| .addressDetail { | |||||
| color: #777; | |||||
| font-size: 22rpx; | |||||
| padding: 5px 0; | |||||
| } | |||||
| text { | |||||
| background-color: #F29E45; | |||||
| padding: 8rpx 10rpx; | |||||
| color: #fff; | |||||
| font-size: 20rpx; | |||||
| margin-left: 10px; | |||||
| border-radius: 5px; | |||||
| } | |||||
| } | |||||
| .min_tips { | |||||
| font-size: 22rpx; | |||||
| color: #777; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 5px 0; | |||||
| align-items: center; | |||||
| } | |||||
| .current-price { | |||||
| font-size: 30rpx; | |||||
| color: #FD5100; | |||||
| } | |||||
| .line { | |||||
| border-top: 2px dotted #00000011; | |||||
| padding: 20rpx 0; | |||||
| .t { | |||||
| padding: 5px 0; | |||||
| color: #000; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| } | |||||
| .head-div { | |||||
| .nickname { | |||||
| font-size: 30rpx; | |||||
| font-weight: 600; | |||||
| text-align: left; | |||||
| line-height: 42rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| .tag { | |||||
| position: relative; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| image { | |||||
| height: 45rpx; | |||||
| width: 90rpx; | |||||
| vertical-align: middle; | |||||
| } | |||||
| .auth { | |||||
| position: absolute; | |||||
| white-space: nowrap; | |||||
| color: #FF6200; | |||||
| left: 23rpx; | |||||
| font-size: 17rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| .days { | |||||
| font-size: 20rpx; | |||||
| font-weight: 400; | |||||
| text-align: left; | |||||
| line-height: 56rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| view { | |||||
| padding-left: 5px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn-x { | |||||
| color: #6fc6ad; | |||||
| border: 1px solid #6fc6ad; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| .btns { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| .btn { | |||||
| color: #6fc6ad; | |||||
| border: 1px solid #6fc6ad; | |||||
| padding: 10rpx 20rpx; | |||||
| border-radius: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||