uniapp 日历选择插件 住店离店

uniapp yekong

uniapp 日历选择插件

<template>
    <view class="content">
        <view class="header">
            <div class="tou">
                <view class="in-and-out">
                    {{ startDay }} - {{ endDay }}
                    <text @click="reset" class="qingkong">清空</text>
                </view>
            </div>
            <view class="week">
                <view>日</view>
                <view>一</view>
                <view>二</view>
                <view>三</view>
                <view>四</view>
                <view>五</view>
                <view>六</view>
            </view>
        </view>
        <scroll-view scroll-y="true" class="section">
            <div class="section2">
                <view v-for="(res, line) in resDate" class="riqiitem" :key="line">
                    <view class="year">{{ res.year }}年{{ res.month }}月</view>
                    <view class="day">
                        <view v-for="week in res.oneDayWeek" class="day-list" :style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
                        <view
                            @tap="selectDay(line, index, (line + 1).toString() + index)"
                            v-for="(riqiitem, index) in res.day"
                            :key="index"
                            class="day-list"
                            :class="[
                                line == start[0] && index == start[1] ? 'bg-orange select-style' : '',
                                (line >= start[0] && line <= end[0] && index > start[1] && index < end[1]) ||
                                (line >= start[0] && index > start[1] && line < end[0]) ||
                                (line <= end[0] && index < end[1] && line > start[0]) ||
                                (line < end[0] && line > start[0])
                                    ? 'bg-higlt-orange'
                                    : '',
                                line == 0 && index + 1 < nowDay ? 'time-out' : '',
                                isNaN(riqiitem) ? 'is-festival' : '',
                                (isNaN(riqiitem) && line == start[0] && index == start[1]) || (isNaN(riqiitem) && line == end[0] && index == end[1]) ? 'not-festival' : '',
                                (priceStauts.length > 0 && priceStauts[line][index] < 0 && start.length > 0 && end.length > 0) ||
                                (priceStauts.length > 0 && priceStauts[line][index] < 0 && start.length == 0 && end.length == 0)
                                    ? 'not-sub'
                                    : '',
                                priceStauts.length > 0 && end.length == 0 && start.length > 0 && priceStauts[line][index] < 0 && line + index * 2 != lastNot[0] + lastNot[1] * 2
                                    ? 'not-sub'
                                    : ''
                            ]"
                            :style="{
                                width: (dayWidth - 10) / 7 + 'px',
                                backgroundColor: line == end[0] && index == end[1] ? 'rgba(129, 197, 231, 1.00)' : '',
                                color: line == end[0] && index == end[1] ? '#FFFFFF' : ''
                            }"
                        >
                            <view class="select-style" v-if="line == start[0] && index == start[1]">入住</view>
                            <view class="select-style" v-if="line == end[0] && index == end[1]">离店</view>
                            <view style="padding-top:2px;padding-bottom:2px;">{{ riqiitem }}</view>
                            <view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
                                <view v-if="priceStauts[line][index] > 0">¥{{ priceStauts[line][index] }}</view>
                                <view v-if="priceStauts[line][index] < 0">无房</view>
                            </view>
                        </view>
                    </view>
                </view>
            </div>
        </scroll-view>
        <view class="submit">
            <button class="sub-btn " :disabled="!isSub" @click="submit">
                <text v-if="isSub">确定</text>
                <text v-if="!isSub">请选择入住日期</text>
            </button>
        </view>
    </view>
</template>

<script>
    
import { mapState, mapGetters, mapMutations } from 'vuex';
//引入节假日的数据,也可以用后台返回去渲染
export default {
    computed: {
        ...mapGetters(['checkinDate', 'checkoutDate']),
        //房间是否能预订
        isSub() {
            if (this.priceStauts.length > 0) {
                for (var i = this.start[0]; i <= this.end[0]; i++) {
                    if (i == this.start[0]) {
                        for (var j = this.start[1]; j < this.date[i].length; j++) {
                            if (this.priceStauts[i][j] == -1) return false;
                        }
                    } else if (this.end[0] == this.start[0]) {
                        for (var j = this.start[1]; j < this.end[1]; j++) {
                            if (this.priceStauts[i][j] == -1) return false;
                        }
                    } else if (i == this.end[0]) {
                        for (var j = 0; j < this.end[1]; j++) {
                            if (this.priceStauts[i][j] == -1) return false;
                        }
                    } else {
                        for (var j = 0; j < this.priceStauts[i].length; j++) {
                            if (this.priceStauts[i][j] == -1) return false;
                        }
                    }
                }
            }
            return this.start.length == 2 && this.end.length == 2 ? true : false;
        },
        //计算日历里的节假日
        resDate() {
            if (this.date.length == 0) return;

            for (var i = 0; i < this.date.length; i++) {
                for (var j = 0; j < this.festival.length; j++) {
                    if (this.festival[j].year == this.date[i].year && this.festival[j].month == this.date[i].month) {
                        for (var k = 0; k < this.festival[j].festival.length; k++) {
                            if (this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1) {
                                this.date[i].day[this.date[i].day.indexOf(this.festival[j].festival[k].day)] = this.festival[j].festival[k].name;
                            }
                        }
                    }
                }
            }

            return this.date;
        }
    },
    data() {
        return {
            out: 0,
            festival: [], //节假日
            type: '-', //日期分隔符
            date: [], //日期数组对象
            dayWidth: 0, //日期的宽度
            nowDay: 0, //当前时间的日
            start: [], //入住时间
            count: 6, //显示月的数量
            startDay: '', //入住日期
            startWeek: '', //入住时间的周几
            end: [], //离开时间
            endDay: '', //离开日期
            endWeek: '', //离开时间的周几
            day: 0, //多少晚
            priceStauts: [], //价格状态
            lastNot: [0, 10] //前置的无房操作
        };
    },
    onLoad(option) {},
    mounted() {
        uni.getSystemInfo({
            success: res => {
                this.dayWidth = res.windowWidth;
            }
        });
        this.setDate();
        console.log(this.checkinDate)
        this.nowDay = new Date(this.checkinDate).getDate();
        console.log(this.nowDay)
        console.log('this.nowDay')
        /*默认入住离店日期,今日入住明日离店,此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作
         *不推荐使用本地缓存,下边只是使用缓存的示例
         */
        this.start = this.setDefaultDate(this.checkinDate);
        this.end = this.setDefaultDate(this.checkoutDate);
        console.log(this.start, this.end);
    },
    watch: {
        //离店日期
        end(newVal) {
            if (this.end.length != 0) {
                //计算选择离店日期

                this.endDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
                this.endWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(newVal[0], newVal[1]));

                //计算天数

                var startDay = this.date[this.start[0]].year + '/' + this.date[this.start[0]].month + '/' + this.isFestival(this.start[0], this.start[1]);
                var endDay = this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(this.end[0], this.end[1]);
                this.day = this.getDay(startDay, endDay);
            } else {
                this.day = 0;
            }
        },
        //入住日期
        start(newVal) {
            if (this.start.length > 0) {
                this.startDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
                this.startWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(newVal[0], newVal[1]));
            }

            if (this.priceStauts.length > 0) {
                console.log(this.lastNot);
                for (var i = newVal[0]; i < this.priceStauts.length; i++) {
                    if (i == newVal[0]) {
                        for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
                            if (this.priceStauts[i][j] == -1) {
                                this.lastNot = [i, j];
                                console.log(this.lastNot);
                                return;
                            }
                        }
                    } else {
                        for (var j = 0; j < this.priceStauts[i].length; j++) {
                            if (this.priceStauts[i][j] == -1) {
                                this.lastNot = [i, j];
                                console.log(this.lastNot);
                                return;
                            }
                        }
                    }
                }
                //清空
                this.lastNot = [];
            }
        }
    },
    methods: {
        //月份补零
        setMonth(dateIndex) {
            let month = this.date[dateIndex].month;
            if (month < 10) {
                month = '0' + month;
            }
            return month + '月';
        },
        //如果是节假日名称则返回选择的日期天数
        isFestival(line, index, push = false) {
            var date = this.date[line].day[index];

            if (isNaN(date)) {
                var newIndex = this.date[line].day.indexOf(date) + 1;
                if (push) return newIndex;
                return newIndex < 10 ? '0' + newIndex : newIndex;
            } else {
                if (push) return date;
                return date < 10 ? '0' + date : date;
            }
        },
        //获取今天明天的日期
        getDefaultDate(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
            var year = dd.getFullYear();
            var mon = dd.getMonth() + 1; //获取当前月份的日期
            var day = dd.getDate();
            return year + '-' + mon + '-' + day;
        },
        //设置入住时间 如果没有传值则根据默认值设置
        setDefaultDate(data) {
            var arr = [0, parseInt(this.nowDay - 1)];

            var start = data.indexOf('-') != -1 ? data.split('-') : data.split('/');

            var year = new Date().getFullYear();

            var month = new Date().getMonth() + 1;

            for (var i = 0; i < this.date.length; i++) {
                if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
                    if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
                        arr = [i, parseInt(this.nowDay - 1)];
                    } else {
                        arr = [i, parseInt(start[2] - 1)];
                    }
                    break;
                }
            }
            return arr;
        },
        //清空
        reset() {
            this.start = [];
            this.end = [];
            this.day = 0;
        },
        //补零操作
        setPull(day) {
            if (day < 10) {
                day = '0' + day;
            }
            return day;
        },
        
        //计算天数
        getDay(date1, date2) {
            //获得天数
            //date1:开始日期,date2结束日期
            var a1 = Date.parse(new Date(date1));
            var a2 = Date.parse(new Date(date2));
            var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心:时间戳相减,然后除以天数
            return day;
        },
        //计算周几
        getWeek(date) {
            var weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var myDate = new Date(Date.parse(date));
            return weekDay[myDate.getDay()];
        },

        //选择入住离开
        selectDay(line, index) {
            if (line == 0 && index + 1 < this.nowDay) return;
            //如果有入住情况和价格则需要进行一些列的判断
            if (this.priceStauts.length > 0) {
                if ((this.start.length == 0 && this.priceStauts[line][index] < 0) || (this.end.length > 0 && this.priceStauts[line][index] < 0)) {
                    return uni.showToast({
                        title: '该日期已被预订',
                        icon: 'none'
                    });
                }

                if ((this.start.length > 0 && line < this.start[0]) || (line == this.start[0] && this.start[1] > index)) {
                    if (this.priceStauts[line][index] < 0)
                        return uni.showToast({
                            title: '该日期已被预订',
                            icon: 'none'
                        });
                    this.start = [line, index];
                    this.end = [];

                    return;
                }

                if (this.start.length > 0 && this.end.length == 0) {
                    if (this.start[0] - line == 0) {
                        for (var j = this.start[1]; j < index; j++) {
                            if (this.priceStauts[line][j] < 0)
                                return uni.showToast({
                                    title: '很抱歉,所选入离店时间包含无房日期',
                                    icon: 'none',
                                    mask: true
                                });
                        }
                    } else {
                        //如果不在同一个月份有三种情况需要处理
                        for (var i = this.start[0]; i <= line; i++) {
                            //开始日期到开始日期当月的最大日期是否包含无房情况
                            if (i == this.start[0]) {
                                for (var j = this.start[1]; j < this.priceStauts[i].length; j++) {
                                    if (this.priceStauts[i][j] < 0)
                                        return uni.showToast({
                                            title: '很抱歉,所选入离店时间包含无房日期',
                                            icon: 'none',
                                            mask: true
                                        });
                                }
                            } else if (i == line) {
                                //结束日期到当月结束日期之前是否包含无房情况
                                for (var j = 0; j < index; j++) {
                                    if (this.priceStauts[i][j] < 0)
                                        return uni.showToast({
                                            title: '很抱歉,所选入离店时间包含无房日期',
                                            icon: 'none',
                                            mask: true
                                        });
                                }
                            } else {
                                //中间间隔的月份需要检查每一天是否包含无房情况
                                for (var j = 0; j < this.priceStauts[i].length; j++) {
                                    if (this.priceStauts[i][j] < 0)
                                        return uni.showToast({
                                            title: '很抱歉,所选入离店时间包含无房日期',
                                            icon: 'none',
                                            mask: true
                                        });
                                }
                            }
                        }
                    }
                }
            }

            //如果没有入住时间
            if (this.start.length == 0) {
                //填充入住时间
                this.start = [line, index];
            } else if (this.start.length > 0 && this.start[0] == line && this.start[1] == index && this.end.length == 0) {
                return;
            } else {
                //如果没有离开时间
                if (this.end.length == 0) {
                    //如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期

                    if (line < this.start[0] || (line == this.start[0] && index < this.start[1])) {
                        this.end = this.start;
                        this.start = [line, index];
                    } else {
                        //如果离开时间比入住时间晚则填充
                        this.end = [line, index];
                    }
                } else {
                    //如果有离开时间则清空离开时间重新填充入住时间
                    this.start = [line, index];
                    this.end = [];
                }
            }
        },
        //设置日历
        setDate() {
            //年份
            var year = new Date(this.checkinDate).getFullYear();

            //月份
            var month = new Date(this.checkinDate).getMonth();
            for (let i = 0; i < this.count; i++) {
                var day = [];
                var week = 0;
                for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
                    day.push(j + 1);
                }

                this.date.push({
                    year: year,
                    month: month + 1,
                    day: day,
                    oneDayWeek: new Date(Date.parse(year + '/' + (month + 1) + '/' + '01')).getDay()
                });
                if (month == 11) {
                    year += 1;
                    month = 0;
                } else {
                    month++;
                }
            }

            return this.date;
        },
        //关闭
        close() {
            uni.navigateBack({
                delta: 1
            });
        },
        //确定入住离店事件提交
        submit() {
            var obj = {
                /* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
                        this.start[0], this.start[1]),
                    startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
                    startDay: this.startDay,
                    startWeek: this.startWeek,
                    endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
                        .end[0], this.end[1]),
                    emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
                    endDay: this.endDay,
                    endWeek: this.endWeek,
                    day: this.day */
                start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1], true),
                end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this.end[0], this.end[1], true),
                startDay: this.date[this.start[0]].month + '月' + this.isFestival(this.start[0], this.start[1], true) + '日',

                endDay: this.date[this.end[0]].month + '月' + this.isFestival(this.end[0], this.end[1], true) + '日',
                day: this.day
            };

            /*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
             *不推荐使用本地缓存,下面是缓存的示例
             */
            uni.setStorage({
                key: 'Time',
                data: JSON.stringify(obj)
            });
            console.log(JSON.stringify(obj))
            this.$store.commit('upcheckinDate', obj.start);
            this.$store.commit('upcheckoutDate', obj.end);
            this.$emit('getdata', true);
        }
    }
};
</script>

<style>
/**确认按钮**/
.submit {
    width: 100%;
    background: white;
    bottom: 0upx;
    height: auto;
}

.sub-btn {
    height: auto;
    border-radius: 10upx;
    background: #fff;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #80c5e7;
    height: 100rpx;
}

.content {
    z-index: 999;
    width: 700rpx;
    background: #fff;
    border-radius: 10rpx;
    overflow: hidden;
}

/**不能预订**/

/* 入住离开时间的color */
.bg-orange {
    background-color: rgba(128, 197, 231, 1);
    font-size: 18upx;
}

.bg-higlt-orange {
    background-color: rgba(128, 197, 231, 1);
    color: #fff;
}

/* 节假日的日期样式 */
.is-festival {
    font-size: 18upx;
    color: orange;
}

/** 非节假日的日期样式**/
.not-festival {
    font-size: 18upx;
    color: white;
}

/***入住离开时间的日历样式*/

.not-sub {
    color: #222222;
    background: #dddddd;
}

.select-out-riqiitem {
    background: #ffffff;
}

.select-style {
    color: white;
    font-size: 20upx;
    padding-top: 4upx;
}

.time-out {
    text-decoration: line-through;
    color: #c0c0c0;
}

/**
     * 点击日期的样式
     */
.bg {
    background: orange;
}

/**
     * 日期部分
     */
.section {
    width: 100%;
    height: 500rpx;
    overflow: scroll;
    padding-top: 0upx;
    background-color: #ffffff;
}

.section2 > .riqiitem > .year {
    text-align: center;
    height: 100upx;
    line-height: 100upx;
    font-size: 30upx;
    font-weight: bold;
    /* padding-left:30upx;
        padding-right: 30upx; */
}

.section2 > .riqiitem > .day {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

.section2 > .riqiitem > .day > .day-list {
    margin-top: 10upx;
    margin-bottom: 10upx;
    min-height: 80upx;
    max-height: 150upx;
    display: flex;
    font-size: 28upx;
    flex-direction: column;
    align-riqiitems: center;
    justify-content: center;
}

/**
     * 头部固定
     */
.header {
    width: 100%;
    background: white;
}

.bar {
    width: 100%;
    height: var(--status-bar-height);
    background: #222222;
}

/**
     * 关闭清空
     */
.set {
    height: 100upx;
    padding-left: 30upx;
    padding-right: 30upx;

    align-riqiitems: center;
    display: flex;
    justify-content: space-between;
}

/**
     * 入住离开时间
     */
.in-and-out {
    height: 90upx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: 400;
    color: #484848;
}

/**
     * 入住离开的view
     */
.in-and-out > .riqiitem {
    display: flex;
    flex-direction: column;
    height: 100upx;
}

/**
     * 未选择入离时间时的文字样式
     */
.in-and-out > .text {
    margin-top: 100upx;
    font-weight: bold;
    font-size: 36upx;
    color: #c0c0c0;
}

/**
     * 一共选择了多少晚的样式
     */
.in-and-out > .riqiitem > .count-border {
    width: 200upx;
    font-size: 28upx;
    height: 40upx;
    margin-top: 48upx;
    text-align: center;
}

.gray {
    color: #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}

.orange {
    color: orange;
    border-bottom: 1px solid orange;
}

/**
     * 共多少晚
     */
.in-and-out > .riqiitem > .count-border > .count {
    font-size: 10px;
}

/**
     * 周一到周日
     */
.week {
    border-bottom: 1px solid #dcdcdc;
    height: 70upx;
    display: flex;
    margin-bottom: 20upx;
    justify-content: space-between;
    align-riqiitems: center;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 22upx;
    background: white;
}

.isa {
    color: red;
}

.isa2 {
    color: red;
}
.qingkong {
    position: absolute;
    right: 20rpx;
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: 400;
    color: #80c5e7;
}
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import moment from 'moment';
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        hotelday: 0,
        checkinDate: moment().subtract('days', -1).format('YYYY-MM-DD'),
        checkoutDate: moment()
            .subtract('days', -2)
            .format('YYYY-MM-DD'),
    },
    mutations: {
        hotelday(state, hotelday) {
            state.hotelday = hotelday
        },
        meishiday(state, meishiday) {
            state.meishiday = meishiday
        },
    },
    getters: {
        meishiday(state) {
            return state.meishiday
        },
        hotelday(state) {
            return state.hotelday
        },
        checkoutDate(state, provider) {
            return state.checkoutDate
        },
        checkinDate(state, provider) {
            return state.checkinDate
        },
    },
})

export default store

使用

<template>
    <view>
        <div class="datetime" @click="goriqi">
            <div class="left">
                <div class="itema">
                    <div class="itema1">{{ checkinDate | filterdata }}</div>
                    <div class="itema2">入住</div>
                </div>
                <div class="itemb"></div>
                <div class="itema">
                    <div class="itema1">{{ checkoutDate | filterdata }}</div>
                    <div class="itema2">离店</div>
                </div>
            </div>
            <div class="itemd">
                <text>共{{ days }}晚</text>
                <image src="../../static/icon_right.png" mode=""></image>
            </div>
        </div>
        
        <uni-popup ref="popup" type="center"><riqi @getdata="close"></riqi></uni-popup>
    </view>
</template>

<script>
import moment from 'moment';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import riqi from './riqi.vue';
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
    components: { uniPopup, riqi },
    computed: mapGetters(['checkinDate', 'checkoutDate']),
    data() {
        return {
            showCaledar: false,
            dateStr: '',
            cityName: '',
            list: [],
            days: 0,
            pageIndex: 1,
            pageSize: 10,
            serviceId: 0,
            keyword: '',
            HomeownersList: [],
            HotelList: [],
            open_city_id: '',
            tjHotelList: [],
            banner: [],
            open_city_gratis_list: [],
            startDate: '',
            endDate: '',
            betweenStart: '',
            betweenEnd: '',
            bo_find: {
                image: ''
            }
        };
    },
    mounted() {
        this.getday();
    },
    onShow() {
        this.getday();
    },
    watch: {
        checkinDate() {
            this.getday();
        },
        checkoutDate() {
            this.getday();
        }
    },
    filters: {
        filtersImg: function(img) {
            return configs.baseUrl + img;
        },
        filterdata: function(e) {
            let data2 = e.replace(/-/g, '/');
            console.log(e);
            return moment(data2).format('MM月DD日');
        },
        filterdata2: function(e, b) {
            return moment(e).diff(moment(b), 'days');
        }
    },
    methods: {
        getday() {
            this.days = moment(this.checkoutDate).diff(moment(this.checkinDate), 'days');
        },
        goriqi() {
            this.$refs.popup.open();
        },
        close() {
            this.$refs.popup.close();
        }
    }
};
</script>

<style lang="scss">
.datetime {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 130rpx;
    .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .itema {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        .itema1 {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
        }
        .itema2 {
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #92959b;
        }
    }
    .itemb {
        width: 32rpx;
        height: 2rpx;
        background: #cecece;
        margin-left: 40rpx;
        margin-right: 30rpx;
    }
    .itemd {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #92959b;
        image {
            width: 12rpx;
            height: 22rpx;
            margin-right: 26rpx;
            margin-left: 16rpx;
        }
    }
}
</style>

喜欢