| @ -0,0 +1,473 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <!--顶部栏--> | |||
| <topbar showRight="1"></topbar> | |||
| <!-- 供应商 --> | |||
| <view class="supplier" v-if="userShop"> | |||
| <!--上面第一个--> | |||
| <view class="topItem"> | |||
| <view class="imageFrame"> | |||
| <!-- <uv-swiper :list="bannerList[0]" height="320rpx" keyName="image"> | |||
| </uv-swiper> --> | |||
| <img src="../../static/image/index/4.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| </view> | |||
| <!-- 下面三个--> | |||
| <view class="threeHeOne"> | |||
| <!-- 第一个--> | |||
| <view class="oneItem"> | |||
| <view class="left"> | |||
| <!--<span>Company Profile</span>--> | |||
| <span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
| <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
| </view> | |||
| <view class="right"> | |||
| 随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
| </view> | |||
| </view> | |||
| <!-- 第二个--> | |||
| <view class="twoItem"> | |||
| <view class="left"> | |||
| <img src="../../static/image/index/2.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| <view class="right"> | |||
| <img src="../../static/image/index/3.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| </view> | |||
| <!-- 第三个--> | |||
| <view class="threeItem"> | |||
| <view class="right"> | |||
| 随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
| </view> | |||
| <view class="left"> | |||
| <!--<span>Company Profile</span>--> | |||
| <span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
| <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!--报价和挂单--> | |||
| <view class="btns"> | |||
| <span @click="goToPage(0)" class="oneBtn"> | |||
| {{ $t('other.supplierQuotation') }} | |||
| </span> | |||
| <!-- 这个提单不需要了 --> | |||
| <!-- <span @click="goToPage(1)" class="twoBtn"> | |||
| {{ $t('other.supplierBilLading') }} | |||
| </span> --> | |||
| </view> | |||
| </view> | |||
| <!-- 采购商 --> | |||
| <view class="purchaser" v-else> | |||
| <!--上面第一个--> | |||
| <view class="topItem"> | |||
| <view class="imageFrame"> | |||
| <img src="../../static/image/index/4.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| </view> | |||
| <!-- 下面三个--> | |||
| <view class="threeHeOne"> | |||
| <!-- 第一个--> | |||
| <view class="oneItem"> | |||
| <view class="left"> | |||
| <span>Company Profile</span> | |||
| <span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
| <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
| </view> | |||
| <view class="right"> | |||
| 随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
| </view> | |||
| </view> | |||
| <!-- 第二个--> | |||
| <view class="twoItem"> | |||
| <view class="left"> | |||
| <img src="../../static/image/index/2.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| <view class="right"> | |||
| <img src="../../static/image/index/3.png" style="width:100%;height:100%;"> | |||
| </view> | |||
| </view> | |||
| <!-- 第三个--> | |||
| <view class="threeItem"> | |||
| <view class="right"> | |||
| 随着全球经济的快速发展,我们这家领先的企业公司应运而生,致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年,总部位于深圳市横岗大厦,拥有广泛的业务领域和专业的团队,专注于实现客户的期望和需求。 | |||
| </view> | |||
| <view class="left"> | |||
| <span>Company Profile</span> | |||
| <span> {{ $t('pages.index.index.companyProfile') }}</span> | |||
| <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <tabber select="0" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import topbar from '@/components/base/topbar.vue' | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import productList from '@/components/user/productList.vue' | |||
| import { | |||
| mapGetters | |||
| } from 'vuex' | |||
| import changeLanguage from '@/components/base/changeLanguage.vue' | |||
| export default { | |||
| components: { | |||
| tabber, | |||
| topbar, | |||
| productList, | |||
| changeLanguage | |||
| }, | |||
| data() { | |||
| return { | |||
| queryParams: { | |||
| pageNo: 1, | |||
| pageSize: 10, | |||
| title: '' | |||
| }, | |||
| bannerList: [] | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getImagePhoneOther() | |||
| if (!this.$store.state.shop && !this.$store.state.buy) { | |||
| uni.reLaunch({ | |||
| url: '/pages_order/auth/selectionIdentity?back=no&' | |||
| }) | |||
| } | |||
| this.$store.commit('getUserInfo') | |||
| this.getBannerList() | |||
| }, | |||
| computed: { | |||
| ...mapGetters(['userShop']), | |||
| }, | |||
| methods: { | |||
| getBannerList() { | |||
| this.$api('bannerList', res => { | |||
| this.bannerList = res.result | |||
| }) | |||
| }, | |||
| goToPage(titleIndex) { | |||
| uni.navigateTo({ | |||
| url: '/pages_order/order/offerOrBillLading?titleIndex=' + titleIndex | |||
| }) | |||
| }, | |||
| getImagePhoneOther() { | |||
| this.$api('getImagePhoneOther', res => { | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| * { | |||
| box-sizing: border-box; | |||
| } | |||
| .page { | |||
| background-color: #2e394d; | |||
| min-height: 100vh; | |||
| // 供应商 | |||
| .supplier { | |||
| display: flex; | |||
| flex-direction: column; | |||
| height: calc(100vh - 120rpx - 120rpx); | |||
| background-color: #2e394d; | |||
| .topItem { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 30%; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| .imageFrame { | |||
| width: 90%; | |||
| height: 90%; | |||
| //padding:80rpx; | |||
| } | |||
| } | |||
| .threeHeOne { | |||
| display: flex; | |||
| padding: 20rpx 40rpx 10rpx; | |||
| flex-direction: column; | |||
| height: 60%; | |||
| .oneItem { | |||
| display: flex; | |||
| height: 33%; | |||
| .left { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 10rpx; | |||
| width: 33%; | |||
| background-color: #1e293d; | |||
| color: white; | |||
| font-size: 26rpx; | |||
| .subText { | |||
| text-align: center; | |||
| width: 80%; | |||
| background-color: #2e394d; | |||
| padding: 0 20rpx; | |||
| } | |||
| } | |||
| .right { | |||
| //height: 30%; | |||
| width: 66%; | |||
| padding: 20rpx; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| font-size: 20rpx; | |||
| color: white; | |||
| } | |||
| } | |||
| .twoItem { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| gap: 20rpx; | |||
| height: 33%; | |||
| margin-top: 20rpx; | |||
| padding: 10rpx; | |||
| .left { | |||
| width: 60%; | |||
| padding: 20rpx; | |||
| background-color: #1e293d; | |||
| } | |||
| .right { | |||
| width: 40%; | |||
| padding: 20rpx; | |||
| background-color: #1e293d; | |||
| } | |||
| } | |||
| .threeItem { | |||
| display: flex; | |||
| //width: 100vw; | |||
| height: 33%; | |||
| .left { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 20rpx; | |||
| width: 33%; | |||
| background-color: #1e293d; | |||
| color: white; | |||
| font-size: 26rpx; | |||
| .subText { | |||
| text-align: center; | |||
| background-color: #2e394d; | |||
| width: 80%; | |||
| padding: 0 20rpx; | |||
| } | |||
| } | |||
| .right { | |||
| //height: 200rpx; | |||
| width: 66%; | |||
| padding: 20rpx; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| font-size: 20rpx; | |||
| color: white; | |||
| } | |||
| } | |||
| } | |||
| .btns { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 40rpx; | |||
| .oneBtn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 40%; | |||
| height: 70rpx; | |||
| border-radius: 40rpx; | |||
| color: #1F1C39; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 10rpx 0 0; | |||
| background: #f2f2f2; | |||
| //margin-top: 20rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| .twoBtn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 40%; | |||
| height: 70rpx; | |||
| border-radius: 40rpx; | |||
| color: #1F1C39; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 10rpx 0 0; | |||
| background: #f2f2f2; | |||
| //margin-top: 20rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| // 采购商 | |||
| .purchaser { | |||
| display: flex; | |||
| flex-direction: column; | |||
| //gap: 40rpx; | |||
| background-color: #2e394d; | |||
| .topItem { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| height: 280rpx; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| .imageFrame { | |||
| width: 90%; | |||
| height: 90%; | |||
| //padding:80rpx; | |||
| } | |||
| } | |||
| .threeHeOne { | |||
| display: flex; | |||
| padding: 20rpx 40rpx 10rpx; | |||
| flex-direction: column; | |||
| .oneItem { | |||
| display: flex; | |||
| .left { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 10rpx; | |||
| width: 33%; | |||
| background-color: #1e293d; | |||
| color: white; | |||
| font-size: 26rpx; | |||
| .subText { | |||
| background-color: #2e394d; | |||
| padding: 0 20rpx; | |||
| } | |||
| } | |||
| .right { | |||
| height: 180rpx; | |||
| width: 66%; | |||
| padding: 20rpx; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| font-size: 20rpx; | |||
| color: white; | |||
| } | |||
| } | |||
| .twoItem { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| gap: 20rpx; | |||
| height: 280rpx; | |||
| margin-top: 20rpx; | |||
| padding: 10rpx; | |||
| .left { | |||
| width: 60%; | |||
| padding: 20rpx; | |||
| background-color: #1e293d; | |||
| } | |||
| .right { | |||
| width: 40%; | |||
| padding: 20rpx; | |||
| background-color: #1e293d; | |||
| } | |||
| } | |||
| .threeItem { | |||
| display: flex; | |||
| //width: 100vw; | |||
| .left { | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| gap: 20rpx; | |||
| width: 33%; | |||
| background-color: #1e293d; | |||
| color: white; | |||
| font-size: 26rpx; | |||
| .subText { | |||
| background-color: #2e394d; | |||
| padding: 0 20rpx; | |||
| } | |||
| } | |||
| .right { | |||
| height: 200rpx; | |||
| width: 66%; | |||
| padding: 20rpx; | |||
| background-image: url('../../static/image/index/1.png'); | |||
| background-size: cover; | |||
| font-size: 20rpx; | |||
| color: white; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @ -1,212 +1,208 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view v-if="list.length>0" class="item" v-for="(item, index) in list" :key="index"> | |||
| <view class="top"> | |||
| <view class="service"> | |||
| <text>{{ $t('other.aluminumProducts') }}</text> | |||
| </view> | |||
| <view class="status"> | |||
| <text> {{ item.auditStatus_dictText }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="zhuti"> | |||
| <view class="left"> | |||
| <img :src="item.pic" style="width: 100%;height: 100%;"/> | |||
| </view> | |||
| <view class="right" @click="lookDetail(item,index)"> | |||
| <view class="text-hidden-1" | |||
| v-if="item.userName"> | |||
| {{ $t('components.customerName') }} :{{ item.userName }} | |||
| </view> | |||
| <view class="text-hidden-1" | |||
| v-if="item.phone"> | |||
| 客户电话:{{ item.phone }} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| {{ $t('other.pickupAddress') }}:{{ item.address }} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| {{ $t('other.pickupDate') }}:{{ item.createTime }} | |||
| </view> | |||
| </view> | |||
| <view class="tip"> | |||
| <!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||
| <img v-if="item.auditStatus==0" src="../../static/order/3.svg" style="width: 100%;height: 100%;"/> | |||
| <img v-if="item.auditStatus==1" src="../../static/order/1.svg" style="width: 100%;height: 100%;"/> | |||
| <img v-if="item.auditStatus==2" src="../../static/order/2.svg" style="width: 100%;height: 100%;"/> | |||
| </view> | |||
| </view> | |||
| <!--撤单按钮--> | |||
| <view class="bottom" v-if="showBackOrder"> | |||
| <view @click="backOrder(item.id)" class="btn"> | |||
| {{ $t('other.withdrawOrder') }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!--无历史记录--> | |||
| <view | |||
| style="padding: 100rpx 0;" | |||
| v-else> | |||
| <uv-empty | |||
| mode="history" | |||
| textSize="28rpx" | |||
| iconSize="100rpx"/> | |||
| </view> | |||
| </view> | |||
| <view class="page"> | |||
| <view v-if="list.length>0" class="item" v-for="(item, index) in list" :key="index"> | |||
| <view class="top"> | |||
| <view class="service"> | |||
| <text>{{ $t('other.aluminumProducts') }}</text> | |||
| </view> | |||
| <view class="status"> | |||
| <text v-if="item.showStatus"> {{ item.showStatus_dictText }}</text> | |||
| <text v-else> {{ item.auditStatus_dictText }}</text> | |||
| </view> | |||
| </view> | |||
| <view class="zhuti"> | |||
| <view class="left"> | |||
| <img :src="item.pic" style="width: 100%;height: 100%;" /> | |||
| </view> | |||
| <view class="right" @click="lookDetail(item,index)"> | |||
| <view class="text-hidden-1" v-if="item.userName"> | |||
| {{ $t('components.customerName') }} :{{ item.userName }} | |||
| </view> | |||
| <view class="text-hidden-1" v-if="item.phone"> | |||
| 客户电话:{{ item.phone }} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| {{ $t('other.pickupAddress') }}:{{ item.address }} | |||
| </view> | |||
| <view class="text-hidden-1"> | |||
| {{ $t('other.pickupDate') }}:{{ item.createTime }} | |||
| </view> | |||
| </view> | |||
| <view class="tip" v-if="item.showStatus == 0"> | |||
| <!--审核状态 0审核中 1 审核通过 2审核未通过--> | |||
| <img v-if="item.auditStatus==0" src="../../static/order/3.svg" style="width: 100%;height: 100%;" /> | |||
| <img v-if="item.auditStatus==1" src="../../static/order/1.svg" style="width: 100%;height: 100%;" /> | |||
| <img v-if="item.auditStatus==2" src="../../static/order/2.svg" style="width: 100%;height: 100%;" /> | |||
| </view> | |||
| </view> | |||
| <!--撤单按钮--> | |||
| <view class="bottom" v-if="showBackOrder && item.showStatus == 0"> | |||
| <view @click="backOrder(item.id)" class="btn"> | |||
| {{ $t('other.withdrawOrder') }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!--无历史记录--> | |||
| <view style="padding: 100rpx 0;" v-else> | |||
| <uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: "orderList", | |||
| props: { | |||
| list: { | |||
| type: Array, | |||
| default: false | |||
| }, | |||
| showBackOrder: { | |||
| type: Boolean, | |||
| default: false | |||
| } | |||
| }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| methods: { | |||
| // 查看详情 | |||
| lookDetail(item, index) { | |||
| // 交易平台的列表只用于展示,有撤单的说明是我的挂单,则可以查看详情 | |||
| if (this.showBackOrder){ | |||
| // uni.navigateTo({ | |||
| // url: `/pages_order/order/orderDetail2?id`+item.id | |||
| // }) | |||
| uni.navigateTo({ | |||
| url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||
| }); | |||
| } | |||
| }, | |||
| // 撤单 | |||
| backOrder(id) { | |||
| let self = this | |||
| uni.showModal({ | |||
| title: self.$t('other.backOrderTitle'), | |||
| content: self.$t('other.backOrderTitleConfirm'), | |||
| success(e) { | |||
| if(e.confirm){ | |||
| self.$api('noShow', {id}, res => { | |||
| if (res.code == 200) { | |||
| uni.showToast({ | |||
| title: self.$t('other.backOrderSuccess'), | |||
| icon: 'none' | |||
| }) | |||
| self.$emit("getList") | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| export default { | |||
| name: "orderList", | |||
| props: { | |||
| list: { | |||
| type: Array, | |||
| default: false | |||
| }, | |||
| showBackOrder: { | |||
| type: Boolean, | |||
| default: false | |||
| } | |||
| }, | |||
| data() { | |||
| return {} | |||
| }, | |||
| methods: { | |||
| // 查看详情 | |||
| lookDetail(item, index) { | |||
| // 交易平台的列表只用于展示,有撤单的说明是我的挂单,则可以查看详情 | |||
| if (this.showBackOrder && item.showStatus == 0) { | |||
| // uni.navigateTo({ | |||
| // url: `/pages_order/order/orderDetail2?id`+item.id | |||
| // }) | |||
| uni.navigateTo({ | |||
| url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}` | |||
| }); | |||
| } | |||
| }, | |||
| // 撤单 | |||
| backOrder(id) { | |||
| let self = this | |||
| uni.showModal({ | |||
| title: self.$t('other.backOrderTitle'), | |||
| content: self.$t('other.backOrderTitleConfirm'), | |||
| success(e) { | |||
| if (e.confirm) { | |||
| self.$api('noShow', { | |||
| id | |||
| }, res => { | |||
| if (res.code == 200) { | |||
| uni.showToast({ | |||
| title: self.$t('other.backOrderSuccess'), | |||
| icon: 'none' | |||
| }) | |||
| self.$emit("getList") | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 20rpx; | |||
| height: calc(90vh - 180rpx); | |||
| .item { | |||
| padding: 20rpx; | |||
| border-radius: 40rpx; | |||
| background-color: #fff; | |||
| overflow: hidden; | |||
| .top { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| font-size: 30rpx; | |||
| .service { | |||
| color: #000; | |||
| } | |||
| .status { | |||
| color: #8d8d8d; | |||
| font-size: 26rpx; | |||
| font-weight: 600; | |||
| } | |||
| } | |||
| .zhuti { | |||
| display: flex; | |||
| margin: 10rpx 0; | |||
| position: relative; | |||
| .left { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| image { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| } | |||
| .right { | |||
| width: calc(100% - 160rpx); | |||
| color: #777; | |||
| font-size: 24rpx; | |||
| padding-left: 20rpx; | |||
| line-height: 40rpx; | |||
| background-color: #f8f8f8; | |||
| } | |||
| .tip { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| position: absolute; | |||
| bottom: -20rpx; | |||
| right: -20rpx; | |||
| } | |||
| } | |||
| .bottom { | |||
| .btn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 40%; | |||
| height: 50rpx; | |||
| border-radius: 40rpx; | |||
| color: #afafaf; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 10rpx 0 0; | |||
| background: #ffffff; | |||
| border: 1px solid #757986; | |||
| //margin-top: 20rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .page { | |||
| display: flex; | |||
| flex-direction: column; | |||
| gap: 20rpx; | |||
| height: calc(90vh - 180rpx); | |||
| .item { | |||
| padding: 20rpx; | |||
| border-radius: 40rpx; | |||
| background-color: #fff; | |||
| overflow: hidden; | |||
| .top { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| font-size: 30rpx; | |||
| .service { | |||
| color: #000; | |||
| } | |||
| .status { | |||
| color: #8d8d8d; | |||
| font-size: 26rpx; | |||
| font-weight: 600; | |||
| } | |||
| } | |||
| .zhuti { | |||
| display: flex; | |||
| margin: 10rpx 0; | |||
| position: relative; | |||
| .left { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| image { | |||
| width: 150rpx; | |||
| height: 150rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| } | |||
| .right { | |||
| width: calc(100% - 160rpx); | |||
| color: #777; | |||
| font-size: 24rpx; | |||
| padding-left: 20rpx; | |||
| line-height: 40rpx; | |||
| background-color: #f8f8f8; | |||
| } | |||
| .tip { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| position: absolute; | |||
| bottom: -20rpx; | |||
| right: -20rpx; | |||
| } | |||
| } | |||
| .bottom { | |||
| .btn { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 40%; | |||
| height: 50rpx; | |||
| border-radius: 40rpx; | |||
| color: #afafaf; | |||
| font-size: 28rpx; | |||
| margin: 20rpx 10rpx 0 0; | |||
| background: #ffffff; | |||
| border: 1px solid #757986; | |||
| //margin-top: 20rpx; | |||
| border-radius: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||