|
|
@@ -0,0 +1,829 @@
|
|
|
+<template>
|
|
|
+ <view class="pages" :style="{'min-height':h+'px','padding-top':(mt)+'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>
|
|
|
+ </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="type" v-for="item,index in roomType" :key="index">
|
|
|
+ <view class="left" v-if="Selected==true">
|
|
|
+ <view class="image">
|
|
|
+ <image @tap="selectPerson()"
|
|
|
+ :src="isSelect?'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 class="">
|
|
|
+ 改价格
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 下架
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 批量按钮 -->
|
|
|
+ <view class="btn-btn" v-if="Selected==true">
|
|
|
+ <view class="bottom-btn">
|
|
|
+ <view class="left">
|
|
|
+ <view class="image">
|
|
|
+ <image @tap="selectPerson()"
|
|
|
+ :src="isSelect?'https://i.ringzle.com/file/20240228/c741a340e19642c59473e6f4a6d2f4be.png':'https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png'">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 已选：1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right">
|
|
|
+ <view class="right-btn">
|
|
|
+ 批量下架
|
|
|
+ </view>
|
|
|
+ <view class="right-btn" @click="Pricing()">
|
|
|
+ 批量定价
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 新增按钮 -->
|
|
|
+ <view class="btn-btn" @click="addType(id)" v-else>
|
|
|
+ <view class="btn">
|
|
|
+ 添加商品
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-popup :show="showPricing" @close="close" @open="open">
|
|
|
+ <view class="pop-pop">
|
|
|
+ </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: [],
|
|
|
+ isSelect: false,
|
|
|
+ Selected: false,
|
|
|
+ showPricing: false,
|
|
|
+ areaShow: false,
|
|
|
+ list1: [{
|
|
|
+ name: '创建时间'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '上架时间'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '价格从高到低'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '价格从低到高'
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: '销量从高到低'
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ areaShowIndex: null,
|
|
|
+ fromData: {
|
|
|
+ homestayId: uni.getStorageSync('homestayId'),
|
|
|
+ limit: 10,
|
|
|
+ page: 1,
|
|
|
+ order: '',
|
|
|
+ orderField: "",
|
|
|
+ status: 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ console.log(option);
|
|
|
+ // if (uni.getStorageSync('merchantType') == 4) {
|
|
|
+ this.getRepast()
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ del(item) {
|
|
|
+ let ids = []
|
|
|
+ ids.push(item.id)
|
|
|
+ this.$api.del('/merchant/hotel/repast', ids).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.getRepast()
|
|
|
+ } else this.$showToast(res.data.msg);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getRepast() {
|
|
|
+ this.$api.get('/merchant/hotel/repast/page', this.fromData).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.roomType = res.data.data.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 区域筛选
|
|
|
+ clickareaShow(e, i) {
|
|
|
+ console.log('111111111111111111', e, i)
|
|
|
+ this.areaShowIndex = i
|
|
|
+ },
|
|
|
+ // 上架时间
|
|
|
+ areaShowed() {
|
|
|
+ console.log(123);
|
|
|
+ this.areaShow = !this.areaShow
|
|
|
+ },
|
|
|
+ changeTab1(index) {
|
|
|
+ console.log(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>
|
|
|
+ .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: 65vh;
|
|
|
+ padding: 46rpx 20rpx 0;
|
|
|
+
|
|
|
+ .hander-one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .del {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .hander-two {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .hander-two-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: Regular;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hander-two-image {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
