637 lines
19 KiB
Vue
637 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<view class="header">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view :style="{height: wxBtnHeight + 'px'}"></view>
|
||
<!-- #endif -->
|
||
<view class="header-item flex flex-between">
|
||
<text class="iconfont icon" @click="$navigateBack()"></text>
|
||
<view class="tabs">
|
||
<view class="tab" :class="{'active': current === i}" v-for="(item, i) in tabs" :key="i" @click="tabsChange(i)">
|
||
<text class="name">{{item.name}}<text v-if="item.total">({{item.total}})</text></text>
|
||
<text class="xian"></text>
|
||
</view>
|
||
</view>
|
||
<text class="iconfont icon" @click="showDrawer"></text>
|
||
</view>
|
||
</view>
|
||
<swiper :current="current" @change="swiperChange" :style="{height: (scrollHeight-45-statusBarHeight)+'px'}">
|
||
<swiper-item style="height: 100%;" v-for="(tab, index) in tabs" :key="index">
|
||
<you-scroll @onPullDown="onPullDown" @onLoadMore="loadMore">
|
||
<view class="scroll">
|
||
<view class="flex flex-center flex-column work" v-if="!checked">
|
||
<image src="https://hejiume-public.oss-cn-chengdu.aliyuncs.com/app/work.png" mode="" class="img"></image>
|
||
<text class="color-b9 font28">休息中，开启工作后可接单</text>
|
||
<button type="primary" class="btn" @click="switchChange(null)">开始工作</button>
|
||
</view>
|
||
<view class="grid" v-else>
|
||
<view class="grid-item" v-for="(item, i) in tab.list" :key="i" @click="goDetail(item)">
|
||
<view class="title">
|
||
<text class="color-b6 font32">{{item.createTime}}</text>
|
||
<text class="color-purple font34">¥{{item.deliveryPlatformMoney}}</text>
|
||
</view>
|
||
<text class="line">{{item.goodsName}}</text>
|
||
<view class="cell">
|
||
<text class="font30 line">
|
||
<text class="color-purple iconfont font24 icon"></text>
|
||
<text class="color-purple" v-if="item.orderType === 2">精品商品请自身供货</text>
|
||
<text class="color-b9" v-else>{{item.storeAddressDetails}}{{item.storeAddressSupplement}}</text>
|
||
</text>
|
||
</view>
|
||
<view class="cell">
|
||
<text class="font30 blod line">
|
||
<text class="color-yellow iconfont font24 icon"></text>
|
||
<text>{{item.userFullName}}</text>
|
||
</text>
|
||
<text class="line font30 blod">{{item.userAddressDetails}}{{item.userAddressSupplement}}</text>
|
||
</view>
|
||
<view class="flex flex-center" style="margin-top: 20rpx;">
|
||
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 1 || item.deliveryPlatformStatus === 2"
|
||
@tap.stop="confirmOrder(item)">确认接单</button>
|
||
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 3"
|
||
@tap.stop="confirmPickup(item.id)">确认取货</button>
|
||
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 4"
|
||
@tap.stop="showPopup(item.id)">确认送达</button>
|
||
<!-- <button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus !== 5 && item.deliveryPlatformStatus !== 1"
|
||
@tap.stop="openModal(item)">取消配送</button> -->
|
||
</view>
|
||
</view>
|
||
<uni-load-more :status="tab.loading"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
</you-scroll>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 左侧菜单 -->
|
||
<uni-drawer ref="drawer" mode="left">
|
||
<scroll-view scroll-y class="drawer" :style="{height: scrollHeight+'px'}">
|
||
<view class="top">
|
||
<view class="flex flex-between" @tap="jumpTo('/pages/setting/personal')">
|
||
<view><image :src="userData.headPortrait" mode="" class="avatar"></image></view>
|
||
<view class="flex flex-column flex-grow">
|
||
<text class="font30 line">{{userData.nickname}}</text>
|
||
</view>
|
||
<text class="iconfont"></text>
|
||
</view>
|
||
<view class="flex flex-between today font28">
|
||
<text>配送员钱包</text>
|
||
<text>¥{{balance||0}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-between status">
|
||
<text class="color-b3 font28">{{checked?'工作中':'休息中'}}</text>
|
||
<switch :checked="checked" @change="switchChange" style="transform: scale(0.8);"/>
|
||
</view>
|
||
<view class="addr" v-if="userData.showAddress">
|
||
<image :src="staticUrl+'user/addr.png'" mode="" class="icon"></image>
|
||
<text class="color-b6 font28">{{userData.showAddress}}</text>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list-item" @tap="jumpTo('/pages/user/wallet/index?type=2')">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">我的钱包</text>
|
||
</view>
|
||
<view class="list-item" @tap="jumpTo('deposit?title='+depositTitle)">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">{{depositTitle}}</text>
|
||
</view>
|
||
<view class="list-item" @tap="jumpTo('orderHistory')">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">历史订单</text>
|
||
</view>
|
||
<view class="list-item" @tap="jumpTo('stock')">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">库存管理</text>
|
||
</view>
|
||
<view class="list-item" @tap="jumpTo('/pages/setting/personal')">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">个人信息</text>
|
||
</view>
|
||
<view class="list-item" @tap="jumpTo('/pages/notice/index')">
|
||
<text class="iconfont icon"></text>
|
||
<text class="name">系统通知</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-drawer>
|
||
|
||
<!-- 确认送达 -->
|
||
<uni-popup ref="popup" type="bottom">
|
||
<view class="popup">
|
||
<text class="title">确认送达</text>
|
||
<view class="form">
|
||
<text>确认码</text>
|
||
<input type="number" :maxlength="6" v-model="deliveryPlatformServiceCode" placeholder="请输入" class="flex-wrap color-b6 flex-1" style="margin-left: 20rpx;">
|
||
</view>
|
||
<view class="flex flex-align-center flex-space-around">
|
||
<button type="default" class="btn" @click="closePopup">取消</button>
|
||
<button type="primary" class="btn bg-base" @click="onConfirm">确认</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- 取消配送弹框 -->
|
||
<uni-popup ref="canCelPopup" type="dialog">
|
||
<uni-popup-dialog
|
||
mode="input"
|
||
title="取消配送"
|
||
placeholder="取消配送原因"
|
||
@confirm="cancelOrder"></uni-popup-dialog>
|
||
</uni-popup>
|
||
|
||
<!-- 弹框 -->
|
||
<modal v-if="showModal">
|
||
<image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
|
||
<text class="iconfont color-w font60" style="margin-top: 20rpx;" @click="showModal = false"></text>
|
||
</modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from "@/common/http/url.js"
|
||
import publics from "@/common/utils/public.js"
|
||
import imMix from "../order/imMix.js"
|
||
import modal from "@/components/modal.vue"
|
||
import vTabs from "@/components/v-tabs/v-tabs.vue"
|
||
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
|
||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||
import uniPopup from "@/components/uni-popup/uni-popup.vue"
|
||
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
|
||
import youScroll from '@/components/you-scroll'
|
||
export default{
|
||
components: { vTabs, uniDrawer, uniLoadMore, uniPopup, uniPopupDialog, youScroll, modal },
|
||
mixins: [imMix],
|
||
data(){
|
||
return {
|
||
staticUrl: this.$staticUrl,
|
||
// tabs: ["待接单", "已接单", "普通订单大厅"],
|
||
tabs: [
|
||
{ name: "待接单", status: 1, total: 0, loading: "loading", list: [], pageSize: 1 },
|
||
{ name: "接单中", status: 2, total: 0, loading: "loading", list: [], pageSize: 1 },
|
||
{ name: "普通订单大厅", loading: "loading", list: []}
|
||
],
|
||
current: 0,
|
||
statusBarHeight: getApp().statusBarHeight,
|
||
scrollHeight: 0,
|
||
checked: false,
|
||
userData: {},
|
||
pageSize: 1,
|
||
list: [],
|
||
loading: "loading",
|
||
generalList: [],
|
||
advertData: {},
|
||
showModal: false,
|
||
balance: 0,
|
||
orderInfo: {},
|
||
depositTitle: "配送定金",
|
||
orderId: null,
|
||
deliveryPlatformServiceCode: "",
|
||
// #ifdef MP-WEIXIN
|
||
wxBtnHeight: 0,
|
||
// #endif
|
||
}
|
||
},
|
||
onShow() {
|
||
this.scrollHeight = uni.getSystemInfoSync().windowHeight
|
||
},
|
||
onLoad() {
|
||
// #ifdef MP-WEIXIN
|
||
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
|
||
// #endif
|
||
this.getUserInfo()
|
||
this.getWalletInfo()
|
||
this.getDepositTitle()
|
||
// 广告弹框
|
||
this.$http("GET", url.cms.advertisingMap, {position: 9}).then(res =>{
|
||
if (res.data && res.data.length > 0) {
|
||
this.advertData = res.data[0]
|
||
if (this.advertData.popupMode === 2) {
|
||
if (!publics.advertShowToStorage(this.advertData.id)) {
|
||
this.showModal = true
|
||
}
|
||
} else {
|
||
this.showModal = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
methods:{
|
||
// 获取配送押金标题
|
||
getDepositTitle(){
|
||
this.$http("GET", url.common.distributorDepositConfig).then(res => {
|
||
this.depositTitle = res.data.keyValue
|
||
})
|
||
},
|
||
getWalletInfo(){
|
||
this.$http('GET', url.user.getWalletInfo).then(res =>{
|
||
this.balance = res.data.distributorBalance
|
||
})
|
||
},
|
||
getUserInfo(type){
|
||
this.$http("GET", url.user.getUserInfoBasic).then(res =>{
|
||
this.userData = res.data
|
||
if (res.data.distributorWorkStatus !== 1) {
|
||
this.checked = true
|
||
}
|
||
this.getList('add', 1)
|
||
this.getList('add', 2)
|
||
})
|
||
},
|
||
getList(type, status, done){
|
||
if (!this.checked) return
|
||
let obj = status ? this.tabs[status - 1] : this.tabs[this.current]
|
||
if (type === 'add') {
|
||
if (obj.loading === 'nomore') {
|
||
return;
|
||
}
|
||
obj.loading = 'loading';
|
||
} else {
|
||
obj.pageSize = 1
|
||
obj.list = []
|
||
obj.loading = 'more';
|
||
}
|
||
let params = {
|
||
orderStatus: status || obj.status,
|
||
pageSize: obj.pageSize
|
||
}
|
||
this.$http("GET", url.distributor.distributorWorkOrder, params).then(res =>{
|
||
obj.list = obj.list.concat(res.data.records)
|
||
obj.total = res.data.total
|
||
if (obj.list.length < res.data.total) {
|
||
obj.loading = "more"
|
||
obj.pageSize++
|
||
} else {
|
||
obj.loading = "nomore"
|
||
}
|
||
this.$nextTick(function(){
|
||
this.tabs[params.orderStatus - 1] = obj
|
||
})
|
||
uni.stopPullDownRefresh()
|
||
if (typeof done === "function") done()
|
||
})
|
||
},
|
||
getGeneralList(done){
|
||
this.tabs[this.current].loading = "loading"
|
||
this.$http("GET", url.distributor.generalOrderList, {pageNum: this.tabs[this.current].list.length}).then(res =>{
|
||
this.tabs[this.current].list = this.tabs[this.current].list.concat(res.data)
|
||
if (this.tabs[this.current].list.length < 12) {
|
||
this.tabs[this.current].loading = "nomore"
|
||
} else {
|
||
this.tabs[this.current].loading = "more"
|
||
}
|
||
uni.stopPullDownRefresh()
|
||
if (typeof done === "function") done()
|
||
})
|
||
},
|
||
onPullDown(done){
|
||
if (this.current === 2) {
|
||
this.tabs[this.current].list = []
|
||
this.getGeneralList(done)
|
||
} else {
|
||
this.getList('refresh', null, done)
|
||
}
|
||
},
|
||
loadMore(){
|
||
if (this.current === 2) {
|
||
this.getGeneralList()
|
||
} else {
|
||
this.getList('add', null)
|
||
}
|
||
},
|
||
//获取订单中的用户会话信息
|
||
getOrderUserConversationInfo(orderInfo, callBack){
|
||
let params = {
|
||
orderId: orderInfo.id,
|
||
orderUserId: orderInfo.userId
|
||
}
|
||
this.$http("GET", url.distributor.getOrderDetailsById, params).then(res =>{
|
||
if (res.data.toUserConversation) {
|
||
callBack(res.data.toUserConversation)
|
||
}else{
|
||
callBack(null)
|
||
}
|
||
}).catch(()=>{
|
||
callBack(null)
|
||
})
|
||
},
|
||
// 确认接单, 普通订单接单时暂不发送消息给对方
|
||
confirmOrder(row){
|
||
//获取订单中的用户会话信息
|
||
this.getOrderUserConversationInfo(row,(userConversation)=>{
|
||
//设置会话,加判断是防止自己给自己发信息，是不允许的
|
||
if(userConversation){
|
||
this.setSessionOperation(userConversation)
|
||
}
|
||
|
||
this.$http("POST", url.distributor.confirmReceiptOrder, {orderId: row.id}).then((res)=>{
|
||
this.$msg(res.data)
|
||
// #ifdef APP-PLUS
|
||
if (userConversation){//(this.current !== 2)，加判断是防止自己给自己发信息，是不允许的
|
||
// 发送一条消息，判断对方是否在线
|
||
this.isOtherOnline(row.userOrderImAccount, "agentConfirm")
|
||
|
||
// 发送消息给对方，邀请对方接单
|
||
let goodsInfo = {
|
||
orderId: row.id,
|
||
goodsId: row.goodsId,
|
||
goodsImage: row.skuImage || row.goodsImage,
|
||
goodsName: row.goodsName,
|
||
skuName: row.skuName,
|
||
price: row.totalPrice,
|
||
number: row.number,
|
||
status: 4 ,// 1-邀请对方接单，用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
|
||
identity: this.userData.imAccount, // 配送配送员的imAccount
|
||
}
|
||
this.sendMsgToOther(row.userOrderImAccount, goodsInfo, 6, 2, ()=>{
|
||
this.editDBData(goodsInfo.orderId, goodsInfo.status)
|
||
})
|
||
}
|
||
// #endif
|
||
this.onPullDown(false)
|
||
})
|
||
})
|
||
},
|
||
// 显示取消配送弹框
|
||
openModal(row){
|
||
this.orderInfo = row
|
||
this.$refs.canCelPopup.open()
|
||
},
|
||
// 取消配送
|
||
cancelOrder(done, value){
|
||
if (!value) return this.$msg("请输入取消配送理由")
|
||
let row = this.orderInfo
|
||
let toImAccount = row.userOrderImAccount
|
||
|
||
//获取订单中的用户会话信息
|
||
this.getOrderUserConversationInfo(row,(userConversation)=>{
|
||
//设置会话,加判断是防止自己给自己发信息，是不允许的
|
||
if(userConversation){
|
||
this.setSessionOperation(userConversation)
|
||
}
|
||
|
||
this.$http("POST", url.distributor.cancelReceiptOrder, {orderId: row.id}).then((res)=>{
|
||
done()
|
||
this.$msg(res.data)
|
||
// #ifdef APP-PLUS
|
||
//加判断是防止自己给自己发信息，是不允许的
|
||
if(userConversation){
|
||
// 发送一条消息，判断对方是否在线
|
||
this.isOtherOnline(toImAccount, "agentCancel")
|
||
// 发送消息给对方
|
||
let goodsInfo = {
|
||
orderId: row.id,
|
||
goodsId: row.goodsId,
|
||
goodsImage: row.skuImage || row.goodsImage,
|
||
goodsName: row.goodsName,
|
||
skuName: row.skuName,
|
||
price: row.totalPrice,
|
||
number: row.number,
|
||
status: 3, // 1-邀请对方接单，用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
|
||
identity: this.userData.imAccount, // 配送配送员的imAccount
|
||
reason: value
|
||
}
|
||
this.sendMsgToOther(toImAccount, goodsInfo, 6, 2, ()=>{
|
||
this.editDBData(goodsInfo.orderId, goodsInfo.status)
|
||
})
|
||
}
|
||
// #endif
|
||
this.getList('refresh', null)
|
||
})
|
||
})
|
||
},
|
||
// 确认取货
|
||
confirmPickup(id){
|
||
let _this = this
|
||
this.$showModal("是否确认当前商品已取得", "提示", res=>{
|
||
if (res.confirm) {
|
||
_this.$http("POST", url.distributor.confirmPickUp, {orderId: id}).then(()=>{
|
||
_this.onPullDown(false)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 确认送达
|
||
onConfirm(){
|
||
let _this = this
|
||
|
||
this.closePopup()
|
||
uni.showLoading({
|
||
mask:true
|
||
})
|
||
let params = {
|
||
orderId: this.orderId,
|
||
deliveryPlatformServiceCode: this.deliveryPlatformServiceCode
|
||
}
|
||
this.$http("POST", url.distributor.confirmService, params).then(res =>{
|
||
uni.hideLoading()
|
||
_this.deliveryPlatformServiceCode = ''
|
||
_this.getList('refresh', null)
|
||
}).catch(()=>{
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
showPopup(orderId){
|
||
this.orderId = orderId
|
||
this.$refs.popup.open()
|
||
},
|
||
closePopup(){
|
||
this.$refs.popup.close()
|
||
},
|
||
goDetail(row){
|
||
this.$navigateTo('detail?id='+row.id+'&orderUserId='+row.userId)
|
||
},
|
||
jumpTo(path){
|
||
this.$navigateTo(path)
|
||
},
|
||
showDrawer(){
|
||
this.$refs.drawer.open()
|
||
this.getWalletInfo()
|
||
},
|
||
switchChange(e){
|
||
if (e) {
|
||
this.checked = e.detail.value
|
||
} else {
|
||
this.checked = true
|
||
}
|
||
this.$http("POST", url.distributor.updateWorkStatus).then(res=>{
|
||
this.onPullDown(false)
|
||
}).catch(()=>{
|
||
this.checked = !this.checked
|
||
})
|
||
},
|
||
tabsChange(i){
|
||
this.current = i
|
||
},
|
||
swiperChange(e){
|
||
this.current = e.detail.current
|
||
if (this.current === 2) {
|
||
this.tabs[this.current].list = []
|
||
this.getGeneralList(false)
|
||
} else {
|
||
this.getList('add', null, false)
|
||
}
|
||
},
|
||
imgJump(){
|
||
this.showModal = false
|
||
this.$http("POST", url.cms.clickAdvertisingMap, {id: this.advertData.id})
|
||
publics.advertOption(this.advertData.operationCode, this.advertData.operationValue)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.header{
|
||
background-color: #FFFFFF;
|
||
padding: 0 20rpx;
|
||
padding-top: var(--status-bar-height);
|
||
&-item{
|
||
height: 90rpx;
|
||
}
|
||
.icon{
|
||
font-size: 56rpx;
|
||
}
|
||
.tabs{
|
||
display: flex;
|
||
align-items: center;
|
||
.tab{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 20rpx;
|
||
.name{
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.xian{
|
||
height: 6rpx;
|
||
width: 40rpx;
|
||
}
|
||
}
|
||
.active .name{
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
.active .xian{
|
||
background-color: #F8D247;
|
||
}
|
||
}
|
||
}
|
||
.scroll{
|
||
height: 100%;
|
||
.work{
|
||
margin-top: 50rpx;
|
||
.img{
|
||
width: 500rpx;
|
||
height: 300rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.btn{
|
||
border-radius: 50rpx;
|
||
width: 300rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.grid{
|
||
margin: 20rpx;
|
||
&-item{
|
||
background-color: white;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
.title{
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.cell{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 16rpx;
|
||
.icon{
|
||
margin-right: 10rpx;
|
||
transform: scale(0.6);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.drawer{
|
||
.top{
|
||
color: #FFFFFF;
|
||
background-color: #41414F;
|
||
padding: 20rpx;
|
||
padding-top: var(--status-bar-height);
|
||
.avatar{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.today{
|
||
padding: 20rpx 0;
|
||
margin-top: 20rpx;
|
||
border-top: 2rpx solid #4e4d4e;
|
||
}
|
||
}
|
||
.status{
|
||
padding: 20rpx;
|
||
}
|
||
.addr{
|
||
margin: 0 20rpx;
|
||
.icon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-bottom: -8rpx;
|
||
}
|
||
}
|
||
.list{
|
||
&-item{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
.icon{
|
||
margin-right: 20rpx;
|
||
font-size: 44rpx;
|
||
color: #222;
|
||
}
|
||
.name{
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.popup{
|
||
background-color: white;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
padding: 20rpx;
|
||
.title{
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
padding-bottom: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.form{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
padding-bottom: 20rpx;
|
||
color: #333333;
|
||
}
|
||
.btn{
|
||
width: 40%;
|
||
}
|
||
}
|
||
</style>
|