1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114 |
- <template>
- <view class="pages" :style="{'min-height':(h+mt)+'px','padding-top':(mt)+'px'}">
- <!-- <view class="pages" :style="{'min-height':h+'px'}"> -->
- <c-nav-bar title="商品管理"></c-nav-bar>
- <view class="tb">
- <view class="tabs">
- <view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
- <text :class="index==current?'active':''">{{item.name}}</text>
- <text v-if="index==current">({{roomType.length}})</text>
- </view>
- </view>
- </view>
- <!-- 房型数量 -->
- <view class="">
- <view class="typeNum">
- <view class="left" style="font-size: 24rpx; color: #777;" @click="areaShowed()">
- <text :class="areaShow==true?'active':''" style="margin-right: 20rpx;">上架时间</text>
- <u-icon name="arrow-down-fill" bold='true' v-if="areaShow==false" size="20" labelPos="left"
- labelSize="26"></u-icon>
- <u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68' size="20"
- labelPos="left" labelSize="26"></u-icon>
- </view>
- <view class="right" @click="showList">
- <view class="image">
- <image src="https://i.ringzle.com/file/20240313/f3d301b3bc4544ffaf5a0d96a761dd00.png" mode="">
- </image>
- </view>
- <view class="text">
- 批量操作
- </view>
- </view>
- </view>
- <!-- 区域筛选 -->
- <view class="contented" :style="{'height':(h-mt)+'px'}" v-show="areaShow">
- <view class="custom_popup">
- <view class="types">
- <view class="pricequjian" style="height: 240rpx;">
- <view class="jiage" v-for="(item, index) in list1" :key="index"
- @click="clickareaShow(item, index)">
- <view class="contentpeice">
- <view class="title" :class="{'Doublactive': areaShowIndex == index}">
- {{item.name}}
- </view>
- <view class="image" v-if="areaShowIndex == index">
- <image
- src="https://i.ringzle.com/file/20240316/16dd69efb40242de83da8207539ec73e.png"
- mode=""></image>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="" style="padding-bottom: 160rpx;">
- <!-- 房型选择 -->
- <view class="type" v-for="item,index in roomType" :key="index" style="">
- <view class="left" v-if="Selected==true">
- <view class="image">
- <!-- <image @tap="selectPerson(item,index)"
- :src="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
- </image> -->
- <image @tap="selectPerson(item,index)"
- :src="selectedTags.includes(item)?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
- </image>
- </view>
- </view>
- <!-- <view @click="goEditTypeInfo(item.houseBaseId)" style="width: 100%;"> -->
- <view style="width: 100%;">
- <view class="right">
- <view class="right-left">
- <image :src="item.cover" mode=""></image>
- </view>
- <view class="right-right">
- <view class="top">
- <text style="font-size: 30rpx; color: #333;">{{item.comboName}}</text>
- </view>
- <view class="under">
- <view style="font-size: 24rpx; color: #777;">销量:{{item.saleNums}}</view>
- <view style="font-size: 36rpx; color: #FF4141; font-weight: Bold; margin-top: 16rpx;">
- ¥{{item.price}}</view>
- </view>
- </view>
- </view>
- <view class="type-btn">
- <view class="type-btn-left">
- </view>
- <view class="type-btn-right">
- <view class="" @click="del(item)">
- 删除
- </view>
- <view @click="gaijia(item,index)">
- 改价格
- </view>
- <view class="" @click="Undered(item)" v-if="item.status==1">
- 下架
- </view>
- <view class="" @click="Undered(item)" v-else>
- 上架
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 批量按钮 -->
- <view class="btn-btn" v-if="Selected==true">
- <view class="bottom-btn">
- <view class="left">
- <view class="image">
- <!-- <image
- :src="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
- </image> -->
- <image
- :src="selectedTags.length>0?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
- </image>
- </view>
- <view class="text">
- 已选:{{selectedTags.length}}
- </view>
- </view>
- <view class="right">
- <view class="right-btn" @click="piliangxiajia()">
- <!-- 批量下架 -->
- {{fromData.status==1?'批量下架':'批量上架'}}
- </view>
- <view class="right-btn" @click="Pricinged()">
- 批量删除
- </view>
- </view>
- </view>
- </view>
- <!-- 新增按钮 -->
- <view class="btn-btn" @click="addType()" v-else>
- <view class="btn">
- 添加商品
- </view>
- </view>
- <u-popup :show="showPricing" @close="close" :round="30">
- <view class="pop-pop">
- <view class="hander-one">
- <view class="image">
- <image src="https://i.ringzle.com/file/20240317/fdb4de4c4413429bb5a98b3f6c2bd856.png" mode="">
- </image>
- </view>
- <view class="text">
- <view class="text1">
- 删除选中的商品
- </view>
- <view class="text2">
- 删除后的商品不可在前台继续售卖,是否继续
- </view>
- </view>
- </view>
- <view class="hander-two">
- <view class="pop-btn-del" @click="showPricing=false">
- 取消
- </view>
- <view class="pop-btn-add" @click="GoOndel()">
- 继续提交
- </view>
- </view>
- </view>
- </u-popup>
- <u-popup :show="showPricingUnder" @close="close" :round="30">
- <view class="pop-pop">
- <view class="hander-one">
- <view class="image">
- <image src="https://i.ringzle.com/file/20240317/fdb4de4c4413429bb5a98b3f6c2bd856.png" mode="">
- </image>
- </view>
- <view class="text">
- <view class="text1" v-if="Shelves==false">
- 下架选中的商品
- </view>
- <view class="text1" v-else>
- 上架选中的商品
- </view>
- <view class="text2" v-if="Shelves==false">
- 下架后商品不可在前台继续售卖,是否继续?
- </view>
- <view class="text2" v-else>
- 确定上架售卖吗?是否继续?
- </view>
- </view>
- </view>
- <view class="hander-two">
- <view class="pop-btn-del" @click="showPricingUnder=false">
- 取消
- </view>
- <view class="pop-btn-add" @click="GoOnUnder()">
- 继续提交
- </view>
- </view>
- </view>
- </u-popup>
- <u-popup :show="showPricinggaijia" @close="close" :round="10">
- <view class="gaijiadiv">
- <view class="toubu">
- 改价格
- <view class="toubux" @click="closegaijia">
- <u-icon name="close" color="#000000" size="40"></u-icon>
- </view>
- </view>
- <view class="jiainput">
- <u--input type='number' v-model="newprice" placeholder="请输入价格" border="surround"
- clearable></u--input>
- </view>
- <view class="queding">
- <view class="queding1" @click="showPricinggaijia=false">
- 取消
- </view>
- <view class="queding2" @click="quedingjiae">
- 确定
- </view>
- </view>
- </view>
- </u-popup>
- <view class="mainContain">
- <!-- <view class="nodata" v-if='dataList.length==0'>
- <NoData></NoData>
- </view> -->
- </view>
- </view>
- </template>
- <script>
- import TopTabs from '@/components/TopTabs/topTabs.vue';
- // import NoData from '../../components/NoData/index.vue';
- export default {
- components: {
- TopTabs,
- // NoData
- },
- data() {
- return {
- h: uni.getSystemInfoSync().windowHeight,
- mt: uni.getSystemInfoSync().statusBarHeight + 44,
- current: 0,
- tabList: [{
- name: '出售中'
- },
- {
- name: '待上架'
- },
- ],
- homestayId: uni.getStorageSync('homestayId') || 0,
- roomType: [],
- selectedTags: [],
- isSelect: false,
- Selected: false,
- showPricing: false,
- showPricingUnder: false,
- Shelves: false,
- areaShow: false,
- list1: [{
- name: '创建时间'
- },
- {
- name: '上架时间'
- },
- {
- name: '价格从高到低'
- },
- {
- name: '价格从低到高'
- },
- // {
- // name: '销量从高到低'
- // },
- ],
- areaShowIndex: null,
- fromData: {
- homestayId: uni.getStorageSync('homestayId'),
- limit: 10,
- page: 1,
- order: '',
- orderField: "",
- status: 1
- },
- ids: [],
- obj: {},
- showPricinggaijia: false,
- newprice: '',
- id: '',
- from: {}
- }
- },
- onLoad(option) {
- // if (uni.getStorageSync('merchantType') == 4) {
- this.getRepast()
- // } else {
- // }
- },
- methods: {
- Pricinged() {
- this.$api.del('/merchant/hotel/repast', this.ids).then(res => {
- if (res.data.code == 0) {
- this.getRepast()
- this.showPricing = false
- this.ids = []
- } else this.$showToast(res.data.msg);
- })
- },
- piliangxiajia() {
- this.$api.post('/merchant/hotel/repast/batchPutAway', this.from).then(res => {
- this.selectedTags = [];
- this.Selected = false;
- this.getRepast(); //获取商品列表
- })
- },
- quedingjiae() {
- let obj = {
- price: this.newprice,
- id: this.id
- }
- this.$api.put('/merchant/hotel/repast', obj).then(res => {
- this.getRepast(); //获取商品列表
- this.showPricinggaijia = false;
- })
- },
- closegaijia() {
- this.showPricing = false;
- this.newprice = '';
- },
- gaijia(e, i) {
- this.showPricinggaijia = true;
- this.id = e.id
- },
- selectPerson(e, i) {
- if (this.selectedTags.includes(e)) {
- this.selectedTags = this.selectedTags.filter(t => t !== e);
- this.ids.splice(i, 1)
- } else {
- this.selectedTags.push(e);
- this.ids.push(e.id)
- this.from = {
- ids: this.ids,
- status: e.status == 1 ? 0 : 1
- }
- }
- },
- // 添加商品
- addType() {
- uni.navigateTo({
- url: '/pages/HotelMerchandise/addCommodity'
- })
- },
- close() {
- this.showPricing = false
- this.showPricingUnder = false
- this.showPricinggaijia = false
- },
- // 删除商品
- del(item) {
- // let ids = []
- this.ids.push(item.id)
- this.showPricing = true
- },
- GoOndel() {
- this.$api.del('/merchant/hotel/repast', this.ids).then(res => {
- if (res.data.code == 0) {
- this.getRepast()
- this.showPricing = false
- this.ids = []
- } else this.$showToast(res.data.msg);
- })
- },
- // 上下架商品
- Undered(item) {
- this.ids.push(item.id)
- this.showPricingUnder = true
- if (item.status == 1) {
- this.obj = {
- ids: this.ids,
- status: 0
- }
- } else {
- this.Shelves = true
- this.obj = {
- ids: this.ids,
- status: 1
- }
- }
- },
- GoOnUnder() {
- this.$api.post('/merchant/hotel/repast/batchPutAway', this.obj).then(res => {
- if (res.data.code == 0) {
- this.getRepast()
- this.showPricingUnder = false
- this.ids = []
- } else this.$showToast(res.data.msg);
- })
- },
- getRepast() {
- this.Shelves = false
- this.$api.get('/merchant/hotel/repast/page', this.fromData).then(res => {
- this.roomType = res.data.data.list
- })
- },
- // 区域筛选
- clickareaShow(e, i) {
- this.areaShowIndex = i
- },
- // 上架时间
- areaShowed() {
- this.areaShow = !this.areaShow
- },
- changeTab1(index) {
- this.current = index;
- if (index == 0) {
- this.fromData.status = 1
- this.getRepast()
- } else {
- this.fromData.status = 0
- this.getRepast()
- }
- },
- // 批量显示
- showList() {
- this.Selected = !this.Selected
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .queding {
- width: 750rpx;
- height: 140rpx;
- display: flex;
- justify-content: space-around;
- align-items: center;
- .queding1 {
- width: 330rpx;
- height: 88rpx;
- background: #F0F2F5;
- border-radius: 44rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 32rpx;
- color: #333333;
- line-height: 88rpx;
- text-align: center;
- font-style: normal;
- }
- .queding2 {
- width: 330rpx;
- height: 88rpx;
- background: #007A69;
- border-radius: 44rpx;
- font-family: PingFangSC, PingFang SC;
- font-weight: 400;
- font-size: 32rpx;
- color: #FFFFFF;
- line-height: 88rpx;
- text-align: center;
- font-style: normal;
- }
- }
- .jiainput {
- width: 690rpx;
- height: 100rpx;
- margin: 0 auto;
- }
- .gaijiadiv {
- width: 750rpx;
- height: 950rpx;
- .toubu {
- width: 750rpx;
- height: 110rpx;
- font-family: PingFang-SC, PingFang-SC;
- font-weight: bold;
- font-size: 36rpx;
- color: #333333;
- line-height: 110rpx;
- text-align: center;
- font-style: normal;
- position: relative;
- .toubux {
- position: absolute;
- top: 33rpx;
- right: 30rpx;
- }
- }
- }
- .Doublactive {
- // background-color: #F0F7F6 !important;
- color: #007A69 !important;
- // border: 1px solid #007A69 !important;
- }
- .contented {
- width: 100%;
- padding: 0 24rpx;
- box-sizing: border-box;
- position: relative;
- }
- .custom_popup {
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, .4);
- top: 0;
- left: 0;
- position: absolute;
- z-index: 999;
- .types {
- width: 100%;
- padding: 30rpx 30rpx 56rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- .pricequjian {
- width: 100%;
- .contentpeice {
- width: 100%;
- display: flex;
- justify-content: space-between;
- margin: 15rpx 0;
- .title {
- font-weight: Regular;
- font-size: 28rpx;
- color: #333333;
- }
- .image {
- width: 28rpx;
- height: 20rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
- }
- }
- .pages {
- background: #F5F8FA;
- box-sizing: border-box;
- .tb {
- width: 100%;
- top: 0;
- left: 0;
- z-index: 999;
- .searchBoxParent {
- width: 100%;
- background: #fff;
- padding: 20rpx 24rpx 6rpx;
- box-sizing: border-box;
- .searchBox {
- width: 100%;
- background-color: #fff;
- }
- }
- .tabs {
- background: #fff;
- padding: 26rpx 0;
- display: flex;
- align-items: center;
- width: 100%;
- &>view {
- width: 25%;
- font-size: 28rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: black;
- line-height: 40rpx;
- position: relative;
- text-align: center;
- }
- .active {
- font-size: 32rpx;
- font-family: PingFang-SC-Bold, PingFang-SC;
- font-weight: bold;
- color: black;
- line-height: 45rpx;
- }
- .active::after {
- position: absolute;
- content: '';
- width: 50rpx;
- height: 8rpx;
- background: #007A69;
- bottom: -26rpx;
- left: 60%;
- margin-left: -42rpx;
- }
- }
- }
- .green {}
- .mainContain {
- display: flex;
- flex-direction: column;
- padding: 0 20rpx;
- .nodata {
- background: white;
- }
- .card {
- background: #fff;
- border-radius: 16rpx;
- margin: 20rpx 0;
- padding: 20rpx;
- .header {
- display: flex;
- justify-content: space-between;
- border-bottom: 1px #f3f3f3 solid;
- padding: 20rpx;
- .red {
- color: indianred;
- }
- .green {
- color: #999999;
- }
- .blue {
- color: #1372FF;
- }
- .grey {
- color: #4C5F76;
- }
- .orange {
- color: #FF9100;
- }
- }
- .mainContent {
- // border-bottom: 1px #f3f3f3 solid;
- display: flex;
- padding: 20rpx 0;
- // justify-content: space-evenly;
- .image {
- background-repeat: no-repeat;
- background-size: cover;
- width: 198rpx;
- height: 180rpx;
- border-radius: 16rpx;
- }
- .middle {
- padding-top: 16rpx;
- color: #777777;
- // display: flex;
- // flex-direction: column;
- // justify-content: space-between;
- margin-left: 25rpx;
- width: 100%;
- .title {
- font-weight: 700;
- font-size: 32rpx;
- color: black;
- }
- .info {
- padding-top: 30rpx;
- color: #777777;
- // display: flex;
- // flex-direction: column;
- &>span {
- margin-top: 10rpx;
- }
- }
- }
- .price {
- color: red;
- text-align: center;
- height: 100%;
- align-items: center;
- align-self: center;
- font-size: 29rpx;
- font-weight: 700;
- }
- }
- .bottom {
- // padding: 30rpx 20rpx;
- display: flex;
- justify-content: flex-end;
- .detail {
- // border: 1rpx solid darkgrey;
- border-radius: 16rpx;
- color: darkgrey;
- padding: 13rpx 34rpx;
- background-color: #F6F6F6;
- font-size: 26rpx;
- color: #333333;
- font-weight: Regular;
- }
- .del {
- border-radius: 16rpx;
- color: darkgrey;
- padding: 13rpx 34rpx;
- background-color: #007A69;
- font-size: 26rpx;
- color: #fff;
- font-weight: Regular;
- }
- }
- }
- }
- }
- .u-input__content {
- margin-top: 22rpx !important;
- }
- .uicon-arrow-right,
- .uicon-close-circle-fill {
- margin-top: 32rpx !important;
- margin-right: 20rpx !important;
- }
- .pop-pop {
- height: 30vh;
- padding: 46rpx 20rpx 0;
- border-radius: 16rpx 16rpx 0 0;
- .hander-one {
- // display: flex;
- // justify-content: space-between;
- text-align: center;
- .image {
- margin: 0 auto;
- width: 64rpx;
- height: 64rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .text {
- .text1 {
- margin-top: 24rpx;
- font-size: 32rpx;
- color: #111111;
- font-weight: bold;
- }
- .text2 {
- font-size: 28rpx;
- color: #999999;
- font-weight: Regular;
- margin: 23rpx 0 64rpx;
- }
- }
- }
- .hander-two {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 30rpx 0;
- .pop-btn-del {
- margin: 0 15rpx;
- padding: 22rpx 136rpx;
- font-size: 32rpx;
- color: #111111;
- font-weight: Regular;
- background-color: #F0F2F5;
- border-radius: 50rpx;
- }
- .pop-btn-add {
- border-radius: 50rpx;
- margin: 0 15rpx;
- background-color: #1372FF;
- padding: 22rpx 100rpx;
- font-size: 32rpx;
- color: #FFFFFF;
- font-weight: Regular;
- }
- }
- .hander-three {
- display: flex;
- border: 1rpx solid #CCCCCC;
- border-radius: 16rpx;
- justify-content: space-between;
- height: 102rpx;
- line-height: 102rpx;
- .hander-three-text {
- width: 200rpx;
- text-align: left;
- display: flex;
- justify-content: space-between;
- margin: 0 20rpx;
- }
- .hander-three-input {
- width: 55%;
- }
- .hander-three-icon {
- height: 102rpx;
- line-height: 102rpx;
- }
- }
- .hander-four {
- margin-top: 30rpx;
- display: flex;
- border-radius: 16rpx;
- justify-content: space-between;
- border: 1rpx solid #CCCCCC;
- height: 102rpx;
- line-height: 102rpx;
- .hander-three-text {
- width: 200rpx;
- text-align: center;
- display: flex;
- justify-content: space-between;
- margin: 0 20rpx;
- }
- .hander-three-input {
- width: 55%;
- }
- .hander-three-icon {
- height: 102rpx;
- line-height: 102rpx;
- }
- }
- }
- .page {
- background: #F3F4F4;
- padding-bottom: 260rpx;
- box-sizing: border-box;
- overflow-y: auto;
- overflow-x: auto;
- }
- .typeNum {
- // width: 100%;
- height: 73rpx;
- display: flex;
- justify-content: space-between;
- padding: 23rpx 24rpx;
- align-items: center;
- .left {
- display: flex;
- align-items: center;
- .active {
- color: #007A69;
- }
- }
- .right {
- display: flex;
- align-items: center;
- .image {
- margin: 0 10rpx;
- width: 30rpx;
- height: 30rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .text {
- font-size: 28rpx;
- font-weight: Regular;
- color: #333333;
- }
- }
- }
- .type {
- margin: 0 auto;
- border-radius: 10rpx 10rpx 10rpx 10rpx;
- width: 86%;
- // height: 114rpx;
- background-color: #fff;
- padding: 30rpx;
- margin-bottom: 20rpx;
- display: flex;
- .left {
- height: 114rpx;
- line-height: 200rpx;
- margin-right: 20rpx;
- .image {
- margin: 0 10rpx;
- width: 30rpx;
- height: 30rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .right {
- width: 100%;
- display: flex;
- .right-left {
- width: 172rpx;
- height: 172rpx;
- border-radius: 16rpx;
- margin-right: 22rpx;
- image {
- width: 100%;
- height: 100%;
- border-radius: 16rpx;
- }
- }
- .right-right {}
- }
- .type-btn {
- width: 100%;
- display: flex;
- justify-content: space-between;
- .type-btn-left {
- width: 50rpx;
- }
- .type-btn-right {
- display: flex;
- view {
- padding: 15rpx 23rpx;
- background-color: #F6F6F6;
- font-size: 24rpx;
- color: #333;
- font-weight: Regular;
- margin-right: 20rpx;
- border-radius: 50rpx;
- }
- }
- }
- }
- .top {
- display: flex;
- justify-content: space-between;
- }
- .under {
- margin-top: 20rpx;
- // display: flex;
- // justify-content: space-between;
- }
- .btn-btn {
- width: 100%;
- height: 136rpx;
- background-color: #fff;
- position: fixed;
- bottom: 0;
- padding: 30rpx 0 0;
- // margin: 0 auto;
- z-index: 9;
- // margin-top: 30rpx;
- // margin-left: 30rpx;
- .bottom-btn {
- display: flex;
- justify-content: space-between;
- margin: 0 24rpx;
- .left {
- width: 25%;
- display: flex;
- align-items: center;
- .image {
- width: 38rpx;
- height: 38rpx;
- margin: 0 10rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .right {
- width: 75%;
- display: flex;
- justify-content: space-evenly;
- .right-btn {
- width: 148rpx;
- height: 80rpx;
- line-height: 80rpx;
- background-color: #1372FF;
- border-radius: 16rpx;
- font-size: 26rpx;
- color: #fff;
- font-weight: Regular;
- text-align: center;
- }
- }
- }
- }
- .btn {
- margin: 0 auto;
- width: 690rpx;
- height: 96rpx;
- background-color: #1372FF;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 34rpx;
- border-radius: 48rpx;
- }
- </style>
|