当前位置: 首页 > news >正文

同城厨师上门做饭系统源码做菜预约做饭家宴代厨轰趴app源码厨师入住+厨师傅端/前端语言uniapp

后端thinkphp开源框架

可以支持app端

首页vue源码

<template>
    <view class="page home-bg">
        <!-- <uni-nav-bar title="" backgroundColor="linear-gradient(to right, #31D081, #18B567)"></uni-nav-bar> -->
        <view class="head-warpper content-p">
            <view class="nav-head  mt10">
                <view style="margin-top: 5rpx;" @click="showCity">
                    <text class="mr5" style="color: #333333;">{{ city||'正在获取定位...' }}</text>
                    <u-icon name="arrow-down" color="#333333" size="16"></u-icon>
                </view>
                <view class="flex" style="margin-top: 5rpx;">
                    <text class="mr5" style="color: #333333;">{{ weather.weather }}
                        {{ weather.temp }} {{ weather.date }}</text>
                    <u-icon name="bell" color="#333333" size="20" @click="toPath('/bundle/pages/message/message')">
                    </u-icon>
                </view>
            </view>
        </view>
        <view class="content-p mt30" style="margin-bottom: 20rpx;">
            <u-swiper @click="clickSwiper" :list="list1" indicator indicatorMode="line" keyName="image" circular
                class=" " height="180" radius="12">
            </u-swiper>
        </view>

        <u-grid col="4" :border="false">
            <u-grid-item v-for="(item,index) in girdList" :key="index" @click="clickgrid(item.navigationPath)">
                <view class="grid-item-box">
                    <image class="image-grid" :src="item.url" mode="aspectFit"></image>
                    <text class="grid-text">{{item.text}}</text>
                </view>
            </u-grid-item>
        </u-grid>


        <view class="u-demo-block" style="margin-left: 30rpx;margin-right: 30rpx;">
            <text class="u-demo-block__title" style="margin-bottom: 15px; font-size: 32rpx;font-weight:800;">推荐套餐</text>

            <u-scroll-list :indicator="false" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c" @right="right"
                @left="left">
                <view class="top_scroll-list" style="flex-direction: row;">

                    <navigator class="top_scroll-list__goods-item" v-for="(item, index) in productlList" :key="index"
                        :class="[(index === 9) && 'top_scroll-list__goods-item--no-margin-right']"
                        :url="`../details/details?id=${item.id}`">
                        <image class="top_scroll-list__goods-item__43image" :src="item.cover" mode="">
                        </image>
                        <text class="top_scroll-list__goods-item__text">{{ item.name }}</text>
                        <view class="group_9 flex-row">
                            <view class="left-group">
                                <text class="text_16">¥</text>
                                <text class="text_18 price-font">{{ item.price }}</text>
                            </view>
                            <view class="group_10">
                                <text class="text_20">¥</text>
                                <text class="text_22 price-font1">{{item.original_price}}</text>
                                <view class="divider"> </view>
                            </view>
                        </view>
                    </navigator>
                    <view class="top_scroll-list__show-more" @tap="showMore">
                        <text class="top_scroll-list__show-more__text">查看更多</text>
                        <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
                    </view>
                </view>
            </u-scroll-list>
        </view>


        <view class="u-demo-block">
            <text class="u-demo-block__title" style="margin-left:30rpx;font-size: 32rpx;font-weight:800;">推荐厨师</text>

            <view class="product-wrapper content-p" style="padding-bottom: 50px;">
                <u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="120">
                </u-skeleton>
                <view class="product-item" :key="i" v-for="(item, i) in cookList" @click="tocookListPath(item)">
                    <view class="flex-row">

                        <view class="left-section flex-col">
                            <view class="text-wrapper flex-col">
                                <image :showLoading="true" style="width: 216rpx; height: 278rpx; border-radius: 6px;"
                                    :src="item.avatar" :lazy-load="true" mode="aspectFill"></image>
                                <!-- <u--image :showLoading="true" :src="item.avatar" width="216rpx" height="278rpx"
                                    radius="6" :fade="true" duration="450" :lazy-load="true"></u--image> -->
                                <text class="text_6">已服务{{ item.business }}次</text>
                                <text class="text_7" v-if="item.appointment_time == '休息中'">休息中</text>

                            </view>
                        </view>
                        <view class="right-group flex-col">
                            <view class="flex-row" style="align-items: center;">
                                <text
                                    class="text_8">{{ item.nickname.length>0?item.nickname:item.realname.length>0?item.realname:''}}</text>
                                <view style="width: 16rpx;"></view>
                                <image src="/static/images/realname_credit@2x.png" mode="scaleToFill"
                                    style="height:40rpx;width: 40rpx; line-height: 44rpx;margin-top: 10rpx;"></image>
                                <text
                                    style="font-size: 26rpx;font-weight:500;color:#d81e06;line-height: 44rpx;margin-top: 10rpx;">已实名</text>
                            </view>
                            <view class="group_7 flex-row" style="margin-top: 20rpx;">

                                <u-tag text="优质服务" size="mini" plain shape="circle" color="#999999"
                                    borderColor="#ECECEC">
                                </u-tag>
                                <u-tag text="随叫随到" size="mini" plain shape="circle" color="#999999"
                                    borderColor="#ECECEC" style="margin-left: 10rpx; font-size: 24rpx;">
                                </u-tag>
                                <u-tag :text="'信用分'+ item.credit" size="mini" plain shape="circle" color="#999999"
                                    borderColor="#ECECEC" style="margin-left: 10rpx; font-size: 24rpx;">
                                </u-tag>
                            </view>
                            <view class="group_8 flex-row" style="margin-top: 20rpx;">

                                <text class="text_14" style="font-weight: 600; font-size: 26rpx;">擅长:</text>
                                <!-- <view class="u-demo-block__content">
                                    
                                </view> -->
                                <view class="u-page__text-item">
                                    <u--text size="12" type="primary" text="豫菜"></u--text>
                                </view>
                                <view class="u-page__text-item">
                                    <u--text size="12" type="error" text="鲁菜"></u--text>
                                </view>
                                <view class="u-page__text-item">
                                    <u--text size="12" type="success" text="淮扬菜"></u--text>
                                </view>
                                <view class="u-page__text-item">
                                    <u--text size="12" type="warning" text="湖北菜"></u--text>
                                </view>
                                <view class="u-page__text-item">
                                    <u--text size="12" type="primary" text="粤菜"></u--text>
                                </view>

                            </view>
                            <view class="group_9 flex-row" style="align-items: center;">

                                <view class="left-group">
                                    <text class="text_10">{{ item.praise }}</text>
                                    <text class="text_11">分</text>
                                    <text class="text_12"> {{' ' + item.comment}}人已评价></text>
                                </view>

                            </view>

                            <view class="group_10 flex-row " style="align-items: center;">

                                <view class="left-group ">
                                    <u--text prefixIcon="map" iconStyle="font-size: 26rpx" size="11"
                                        :text="'距您'+item.distance + 'km'">
                                    </u--text>

                                </view>
                                <view class="right-group">
                                    <view :class="item.appointment_time == '休息中'? 'grayer':'right-text-wrapper_1'">
                                        <text>立即预约</text>
                                    </view>
                                </view>
                            </view>

                        </view>

                    </view>
                    <view style="margin-top: 20rpx;">
                        <u-scroll-list indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c" @right="right"
                            @left="left">
                            <view class="scroll-list" style="flex-direction: row;">
                                <view class="scroll-list__goods-item" v-for="(ite, index) in item.album" :key="index"
                                    :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
                                    <image class="scroll-list__goods-item__image" :src="ite" mode="">
                                    </image>
                                    <!-- <text class="scroll-list__goods-item__text">{{ item.price }}</text> -->
                                </view>
                                <view class="scroll-list__show-more" @tap="showMore">
                                    <text class="scroll-list__show-more__text">查看更多</text>
                                    <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
                                </view>
                            </view>
                        </u-scroll-list>
                    </view>
                </view>
            </view>
        </view>
        <!-- <wrap-version-update id="623401ba89eefa00015523d2"></wrap-version-update> -->
    </view>
</template>

<script>
    import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
    import amap from '@/config/amap-wx.130.js';
    export default {
        components: {
            tmSkeleton,
        },
        data() {
            return {
                girdList: [{
                    index: '0',
                    url: '../../static/indexImage/children_grid.png',
                    text: '精选套餐',
                    navigationPath: '/pages/index/recommendpackage'
                }, {
                    index: '1',
                    url: '../../static/indexImage/adv_grid.png',
                    text: '厨师入驻',
                    navigationPath: '/bundle/pages/settled/settled'
                }, {
                    index: '2',
                    url: '../../static/indexImage/sos_grid.png',
                    text: '开通会员',
                    navigationPath: '/bundle/pages/user_vip/user_vip'
                }, {
                    index: '3',
                    url: '../../static/indexImage/shopping_grid.png',
                    text: '附近厨师',
                    navigationPath: '/pages/technician/technician'
                }],
                goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
                menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
                goodsArr: [{
                        price: '广式石斑鱼',
                        thumbnail: 'https://imgck.5556dujia.com//FnHNUp9YorNxZNzAiH3EvDvHYgQW'
                    },
                    {
                        price: '芙蓉蒸鲜鲍',
                        thumbnail: 'https://imgck.5556dujia.com//FmEmBSOtCaaEXxViblfDvmNDXhsj'
                    },
                    {
                        price: '东山羔羊排',
                        thumbnail: 'https://imgck.5556dujia.com//FnONzijIcyUYMvz_SvkswKzgY8FO'
                    },
                    {
                        price: '青柠甜辣虾',
                        thumbnail: 'https://imgck.5156dujia.com//Ft5SmhP0XDBDhhG_eDBNJUf-SY8P'
                    },
                    {
                        price: '青豆焗百合',
                        thumbnail: 'https://imgck.5556dujia.com//FiKE82fdZcXvzvGdUPY8tHRTWw7B'
                    },
                    {
                        price: 'XO酱爆淮山',
                        thumbnail: 'https://imgck.5556dujia.com//Fl4iZP6BmollGV-95yhMz4dO-ZVF'
                    },
                    {
                        price: '拍蒜炒广东菜心',
                        thumbnail: 'https://imgck.5556dujia.com//FoRTUteC-o2tj4E8MZZzbdeihHWx'
                    },
                    {
                        price: '美极蒜爆鸡枞菌',
                        thumbnail: 'https://imgck.5556dujia.com//FoVe0TcM6zkW5TEad-McN759uxDR'
                    }
                ],
                city: "",
                weather: {
                    weather: "",
                    temp: '',
                    date: ""
                },
                bgColor: {
                    "backgroundImage": "linear-gradient(to right, #31D081,#18B567)"
                },
                list1: [],
                cookList: [],
                page: 1,
                current: 0,
                total: null,
                productlList: [],
                loading: true,
                src: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png",
                gaodekey: 'a3c5959a923ba9c20f037c50cf42a608',
                amapPlugin: null,
                longitude: '',
                latitude: ''
            }
        },
        computed: {

        },
        onLoad() {

            this.getLat();
            // this.init();
        },
        onShow() {
            // if (this.cookList.length == 0) {
            // }
            this.getLat();

            let that = this;
            uni.$on('addressInfo', function(data) {
                uni.setStorageSync('address_info', {
                    address: data.poiaddress,
                    longitude: data.latlng.lng,
                    latitude: data.latlng.lat,
                    city: data.cityname
                });
                uni.setStorageSync('addlongitude', {
                    longitude: data.latlng.lng,
                    latitude: data.latlng.lat,
                });
                that.longitude = data.latlng.lng;
                that.latitude = data.latlng.lat;
                that.city = data.cityname;
                that.getWeather();
            })
        },
        methods: {

            tocookListPath(item) {
                console.log(item)
                if (item.appointment_time == '休息中') {
                    uni.showToast({
                        title: '该厨师正在休息中',
                        icon: 'none'
                    })
                    return
                }
                uni.navigateTo({
                    url: '/bundle/pages/home/home?id=' + item.id + "&distance=" + item.distance
                })
            },
            clickgrid(name) {
                if (name == '/pages/technician/technician') {
                    uni.switchTab({
                        url: name
                    })
                } else {
                    uni.navigateTo({
                        url: name
                    })
                }

            },
            clickSwiper(index) {
                if (this.list1[index].text) {
                    const str = encodeURIComponent(this.list1[index].text);
                    console.log(str);
                    uni.navigateTo({
                        url: '/pages/index/atricle?item=' + str
                    })
                }
            },
            getLat() {
                const _this = this;
                uni.getLocation({
                    type: 'wgs84',
                    success: res => {
                        this.longitude = res.longitude;
                        this.latitude = res.latitude;
                        AMap.plugin('AMap.Geocoder', function() {
                            var geocoder = new AMap.Geocoder({
                                // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
                                city: '郑州市'
                            })
                            var lnglat = [res.longitude, res.latitude];
                            geocoder.getAddress(lnglat, function(status, data) {
                                if (status === 'complete' && data.info === 'OK') {
                                    // result为对应的地理位置详细信息
                                    console.log(data)
                                    let address = data.regeocode.addressComponent;
                                    address.longitude = _this.longitude;
                                    address.latitude = _this.latitude;
                                    uni.setStorageSync('address_info', address)
                                    _this.city = address.district ? address.district : address
                                        .city;
                                    _this.init();
                                    _this.getWeather();
                                }
                            })
                        })
                    }
                });
            },
            getLat1() {
                let _this = this;
                // #ifndef H5
                let type = 'gcj02';
                // #ifdef MP-WEIXIN
                type = 'wgs84';
                // #endif
                uni.getLocation({
                    altitude: false,
                    geocode: true,
                    type: type,
                    success: (res) => {
                        console.log(2222222, res)
                        // #ifdef APP
                        console.log(134523);
                        let {
                            latitude,
                            longitude,
                            address
                        } = res;
                        console.log(address);
                        address.longitude = longitude;
                        address.latitude = latitude;
                        let wz = uni.getStorageSync('address_info')
                        if (!wz || wz.district != address.district || !_this.productlList.length) {
                            uni.setStorageSync('address_info', address)
                            _this.city = address.district ? address.district : address.city;
                            _this.init();
                            _this.getWeather();
                        }
                        // #endif
                        // #ifdef MP-WEIXIN
                        let {
                            latitude,
                            longitude
                        } = res;
                        const _this = this;
                        this.amapPlugin = new amap.AMapWX({
                            key: this.gaodekey
                        });
                        _this.amapPlugin.getRegeo({
                            success: (data) => {
                                console.log(data, '当前定位');
                                let address = data[0].regeocodeData.addressComponent;
                                address.longitude = longitude;
                                address.latitude = latitude;
                                let wz = uni.getStorageSync('address_info')
                                if (!wz || wz.district != address.district || !_this.productlList
                                    .length) {
                                    uni.setStorageSync('address_info', address)
                                    _this.city = address.district ? address.district : address
                                        .city;
                                    _this.init();
                                    _this.getWeather();
                                }
                                // _this.address =`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;

                                // // _this.address 可根据自己的实际情况修改
                                // _this.address = `${data[0].regeocodeData.formatted_address}`;
                                uni.hideLoading();
                            },
                            fail: (err) => {
                                uni.showToast({
                                    title: "获取位置失败,请重启小程序",
                                    icon: "error"
                                })
                            }
                        });
                        // #endif
                    },
                    fail: (err) => {
                        console.log(err)
                    }
                })
                // #endif
                // #ifdef H5
                var self = this;
                AMap.plugin('AMap.Geolocation', function() {
                    var geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位,默认:true
                        enableHighAccuracy: true,
                        // 设置定位超时时间,默认:无穷大
                        timeout: 10000,
                    });
                    //获取用户当前的精确位置信息(经纬度)
                    geolocation.getCurrentPosition(function(status, result) {
                        if (status == 'complete') {
                            console.log(result);
                        } else {

                        }
                    });
                })
                AMap.plugin('AMap.CitySearch', function() {
                    var citySearch = new AMap.CitySearch();
                    citySearch.getLocalCity(function(status, result) {
                        console.log(status)
                        console.log(result)
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功,result即为当前所在城市信息
                            // console.log('通过ip获取当前城市:', result)
                            // self.cityName = result.city;
                            // self.cityCode = result.adcode;
                            var lnglat = result.rectangle.split(';')[1].split(',');
                            self.longitude = lnglat[0];
                            self.latitude = lnglat[1];

                            //逆向地理编码查询地理位置详细信息
                            AMap.plugin('AMap.Geocoder', function() {
                                var geocoder = new AMap.Geocoder({
                                    // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
                                    city: result.adcode
                                })
                                var lnglat = result.rectangle.split(';')[0].split(',');
                                geocoder.getAddress(lnglat, function(status, data) {
                                    if (status === 'complete' && data.info === 'OK') {
                                        // result为对应的地理位置详细信息
                                        console.log(data)
                                        let address = data.regeocode.addressComponent;
                                        address.longitude = self.longitude;
                                        address.latitude = self.latitude;
                                        let wz = uni.getStorageSync('address_info')
                                        if (!wz || wz.district != address.district || !
                                            _this.productlList.length) {
                                            uni.setStorageSync('address_info', address)
                                            _this.city = address.district ? address
                                                .district : address.city;
                                            _this.init();
                                            _this.getWeather();
                                        }
                                    }
                                })
                            })
                        } else {}
                    })
                })
                // #endif
            },
            getWeather() {
                // 获取日历
                let that = this;
                uni.request({
                    url: `https://query.asilu.com/weather/baidu?city=${this.city}`,
                    method: 'GET',
                    success: res => {

                        let data = res.data.weather[0];
                        that.weather.weather = data.weather;
                        that.weather.temp = data.temp;
                        that.weather.date = res.data.date;
                    },
                    fail: () => {
                        console.log("警告", "天气接口获取失败")
                    },
                    complete: () => {}
                });
            },
            // 获取轮播图
            getBanner() {
                this.$http.post('api/index/index').then(res => {

                    this.list1 = res;
                    console.log(res, 'res')
                })
            },
            // 获取首页列表数据
            getList() {
                this.$http.post('api/index/service', {
                    page: this.page,
                    orderBy: this.current
                }).then(res => {
                    this.loading = false
                    let {
                        list,
                        total
                    } = res;
                    this.productlList.push(...list);
                    this.total = total;
                })
            },

            getCookList() {
                let obj = {
                    lat: this.latitude,
                    lng: this.longitude,
                    page: "1",
                    type: this.current
                }
                this.$http.post('api/technician/index', obj).then(res => {
                    console.log(res);
                    let {
                        list,
                        total
                    } = res;
                    // this.dataList.push(...list);
                    var arr = res.list;
                    if (arr.length > 0) {
                        this.cookList = [];
                    }
                    arr.forEach((item, index) => {
                        var str = item.album;
                        item.album = JSON.parse(str);
                        this.cookList.push(item);
                    });
                    // this.cookList.push(...list);
                    console.log(this.cookList);
                })
            },

            init() {
                this.getBanner();
                this.getList();
                this.getCookList();
            },
            onClickItem(e) {
                if (this.current !== e) {
                    this.current = e;
                    this.page = 1;
                    this.productlList = [];
                    this.total = null;
                    this.getList();
                }
            },
            toPath(url) {
                uni.navigateTo({
                    url,
                })
            },
            showCity() {
                console.log(123)
                uni.navigateTo({
                    url: '/pages/index/webview?type=1'
                })
                // uni.chooseLocation({
                //     latitude: this.latitude,
                //     longitude: this.longitude,
                //     success: (res) => {
                //         console.log(res)
                //         let reg = /.+?(省|市|镇|自治区|自治州|县|区)/g;
                //         let { longitude , latitude ,address } = res;
                //         let arr = address.match(reg);
                //         this.city = arr[1];
                //         uni.setStorageSync('address_info',{
                //             address,
                //             longitude,
                //             latitude,
                //             city: this.city
                //         })
                //         this.getWeather();
                //     },
                //     fail(err) {
                //         console.log(err);
                //     },
                //     complete(res) {
                //         console.log(res);
                //     }
                // })
            }
        },
        onNavigationBarButtonTap(e) {
            console.log(e)
            this.$refs.mpvueCityPicker.show();
        },
        onPullDownRefresh() {
            let _self = this
            console.log('refresh');
            setTimeout(() => {
                uni.stopPullDownRefresh(); //停止当前页面下拉刷新
                this.page = 1;
                this.productlList = [];
                this.total = null;
                this.init();
            }, 1000);
        }
    }
</script>

<style lang="scss">
    .home-bg {

        // height: 324rpx;
        // background: linear-gradient(to bottom, #31D081, #FFFFFF);
        // border-radius: 0px 0px 0rpx 0rpx;

        .head-warpper {
            //position: fixed;

        }


        .image-title {
            width: 100%;
        }

        .image-grid {
            width: 120rpx;
            height: 120rpx;
        }

        .image-area {
            width: 100%;
            padding-top: 10rpx;
        }

        .grid-text {
            font-size: 20rpx;
            margin-top: 10rpx;
        }

        .grid-item-box {
            flex: 1;
            // position: relative;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 5px 0;
        }

        .mymicro-grid {
            margin-top: 8rpx;
            font-size: 28rpx;
            color: #ffffff;
            width: 150rpx;
            background-color: #DF2D1A;
            border-radius: 20%;
            display: inline-block;
        }

        .top_scroll-list {
            margin-top: 20rpx;
            @include flex(column);

            &__goods-item {
                margin-right: 10px;
                width: 112px;

                &__43image {
                    width: 112px;
                    height: 84px;
                    border-radius: 4px;
                    background: #fff0f0;
                }

                &__text {
                    padding-left: 10rpx;
                    padding-right: 10rpx;
                    width: 112px;
                    color: #333333;
                    font-weight: 800;
                    text-align: center;
                    font-size: 13px;
                    margin-top: 5px;
                    white-space: nowrap;
                }

                &__price {
                    color: #f56c6c;
                    text-align: center;
                    font-size: 12px;
                    white-space: nowrap;
                }
            }

            &__show-more {
                background-color: #fff0f0;
                border-radius: 3px;
                padding: 3px 6px;
                @include flex(column);
                align-items: center;

                &__text {
                    font-size: 12px;
                    width: 12px;
                    color: #f56c6c;
                    line-height: 16px;
                }
            }

            .group_9 {
                line-height: 28rpx;
                margin-top: 10rpx;
                width: 100%;
                display: flex;
                justify-content: space-around;

                .left-group {

                    white-space: nowrap;
                    height: 44rpx;

                    .text_16 {
                        color: #f56c6c;
                        font-size: 18rpx;
                        line-height: 28rpx;
                    }

                    .text_18 {
                        color: #f56c6c;
                        font-size: 24rpx;
                        line-height: 44rpx;
                    }
                }
            }

            .group_10 {
                line-height: 28rpx;
                white-space: nowrap;
                position: relative;

                .text_20 {
                    color: #999999;
                    font-size: 18rpx;
                    line-height: 28rpx;
                }

                .text_22 {

                    color: #999999;
                    font-size: 24rpx;
                    line-height: 28rpx;
                }

                .divider {
                    background-color: rgb(151, 151, 151);
                    width: 88rpx;
                    height: 2rpx;
                    position: absolute;
                    left: 2rpx;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }

            }

        }

        .scroll-list {
            margin-top: 20rpx;
            @include flex(column);

            &__goods-item {
                margin-right: 10px;

                &__image {
                    width: 60px;
                    height: 60px;
                    border-radius: 4px;
                    background: #fff0f0;
                }

                &__text {
                    color: #333333;
                    text-align: center;
                    font-size: 12px;
                    margin-top: 5px;
                    white-space: nowrap;
                }

                &__price {
                    color: #f56c6c;
                    text-align: center;
                    font-size: 12px;
                    margin-top: 5px;
                    white-space: nowrap;
                }
            }

            &__show-more {
                background-color: #fff0f0;
                border-radius: 3px;
                padding: 3px 6px;
                @include flex(column);
                align-items: center;

                &__text {
                    font-size: 18rpx;
                    width: 12px;
                    color: #f56c6c;
                    line-height: 10px;
                }
            }

            .group_9 {
                line-height: 28rpx;
                margin-top: 10rpx;
                width: 100%;
                display: flex;
                justify-content: space-around;

                .left-group {

                    white-space: nowrap;
                    height: 44rpx;

                    .text_16 {
                        color: #f56c6c;
                        font-size: 18rpx;
                        line-height: 28rpx;
                    }

                    .text_18 {
                        color: #f56c6c;
                        font-size: 24rpx;
                        line-height: 44rpx;
                    }
                }
            }

            .group_10 {
                line-height: 28rpx;
                white-space: nowrap;
                position: relative;

                .text_20 {
                    color: #999999;
                    font-size: 18rpx;
                    line-height: 28rpx;
                }

                .text_22 {

                    color: #999999;
                    font-size: 24rpx;
                    line-height: 28rpx;
                }

                .divider {
                    background-color: rgb(151, 151, 151);
                    width: 88rpx;
                    height: 2rpx;
                    position: absolute;
                    left: 2rpx;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }

            }


        }

        .nav-head {
            // width: 100vw;
            // position: fixed;
            //background: linear-gradient(to right, #31D081, #18B567);

            //z-index: 1;
            font-size: 30rpx;
            font-weight: 380;
            display: flex;

            view {
                display: flex;
                flex-direction: row;
                align-items: center;
                color: white;
            }

            .flex {
                flex: 1;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;

                text {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                }
            }

            .flex_2 {
                flex: 2;
            }
        }

        .nav-bd {
            width: 85%;

            .nav-bd-item {
                width: 150rpx;
                text-align: center;
            }

            .text-t1 {
                font-size: 30rpx;
            }

            .text-t2 {
                font-size: 35rpx;
                font-weight: bold;
            }
        }

        .grid-text {
            font-size: 14px;
            color: #909399;
            padding: 10rpx 0 20rpx 0rpx;
            /* #ifndef APP-PLUS */
            box-sizing: border-box;
            /* #endif */
        }

        .product-wrapper {
            margin: 0 0 30rpx 0;

            .product-item {
                padding: 16rpx 16rpx 16rpx 16rpx;
                background-color: rgb(255, 255, 255);
                border-radius: 16rpx;
                margin: 20rpx 0;

                .left-section {
                    //padding-top: 140rpx;
                    color: rgb(255, 255, 255);
                    font-size: 24rpx;
                    line-height: 34rpx;
                    white-space: nowrap;
                    border-radius: 12rpx;
                    //background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844604317986283.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 216rpx;
                    height: 288rpx;

                    .text-wrapper {
                        padding: 13rpx 0 0 0;
                        position: relative;

                        .text_6 {
                            text-align: center;
                            width: 216rpx;
                            height: 44rpx;
                            position: absolute;
                            bottom: 0;
                            background-color: rgba(0, 0, 0, 0.36);
                            border-radius: 0px 0px 12rpx 12rpx;
                            //margin: 0 6rpx;
                        }

                        .text_7 {
                            text-align: center;
                            width: 80rpx;
                            height: 36rpx;
                            position: absolute;
                            top: 10;
                            right: 0;
                            font-size: 20rpx;
                            background-color: #999999;
                            border-radius: 0px 10px 0rpx 18rpx;
                            //margin: 0 6rpx;
                        }

                    }
                }

                .right-group {
                    margin-left: 24rpx;
                    flex: 1 1 auto;

                    .group_7 {
                        margin-top: 8rpx;

                        .left-text-wrapper {
                            padding: 4rpx 0;
                            color: rgb(255, 255, 255);
                            font-size: 20rpx;
                            line-height: 28rpx;
                            white-space: nowrap;
                            background-color: rgb(243, 151, 53);
                            border-radius: 8rpx;
                            width: 104rpx;
                            height: 36rpx;
                            text-align: center;
                        }

                        .right-text-wrapper {
                            margin-left: 6rpx;
                            padding: 2rpx 0;
                            color: rgb(243, 151, 53);
                            font-size: 20rpx;
                            line-height: 28rpx;
                            white-space: nowrap;
                            border-radius: 8rpx;
                            width: 104rpx;
                            height: 36rpx;
                            border: solid 2rpx rgb(243, 151, 53);
                            text-align: center;
                        }
                    }

                    .group_8 {
                        margin-top: 8rpx;
                        color: rgb(102, 102, 102);
                        font-size: 24rpx;
                        line-height: 34rpx;
                        white-space: nowrap;

                        .u-page__text-item {
                            padding-left: 6rpx;
                        }
                    }

                    .group_9 {
                        margin-top: 20rpx;
                        width: 100%;
                        display: flex;

                        .left-group {
                            white-space: nowrap;


                            .text_10 {
                                margin-left: 0;
                                font-weight: 500;
                                color: #f1a532;
                                font-size: 40rpx;
                                line-height: 34rpx;
                                white-space: nowrap;
                            }

                            .text_11 {
                                color: #f1a532;
                                font-size: 26rpx;
                                line-height: 34rpx;
                                white-space: nowrap;
                            }

                            .text_12 {
                                color: #3C9CFF;
                                font-size: 24rpx;
                                line-height: 34rpx;
                                white-space: nowrap;
                            }
                        }

                    }

                    .group_10 {
                        margin-top: 10rpx;
                        width: 100%;
                        display: flex;
                        flex: 5;
                        flex-direction: row;

                        .left-group {
                            flex: 4;
                        }

                        .right-group {
                            flex: 1;

                            .right-text-wrapper_1 {
                                margin-right: 10rpx;
                                padding: 4rpx 0 2rpx;
                                color: #FFFFFF;
                                font-size: 24rpx;
                                line-height: 34rpx;

                                background-image: linear-gradient(45deg,
                                        #1cbbb4,
                                        #0081ff);
                                border-radius: 20rpx;
                                width: 128rpx;
                                height: 40rpx;
                                text-align: center;
                            }

                            .grayer {
                                margin-right: 10rpx;
                                padding: 4rpx 0 2rpx;
                                color: #FFFFFF;
                                font-size: 24rpx;
                                line-height: 34rpx;
                                background: #E4E4E4;

                                border-radius: 20rpx;
                                width: 128rpx;
                                height: 40rpx;
                                text-align: center;
                            }
                        }
                    }

                    .text_8 {
                        margin-top: 8rpx;
                        color: rgb(0, 0, 0);
                        font-size: 36rpx;
                        font-weight: 500;
                        line-height: 44rpx;
                        white-space: nowrap;
                        text-align: center;
                    }

                    .text_10 {
                        margin-top: 12rpx;
                        margin-bottom: 10rpx;
                        font-weight: 500;
                        color: #f1a532;
                        font-size: 44rpx;
                        line-height: 34rpx;
                        white-space: nowrap;
                        padding-right: 10rpx;
                    }
                }
            }
        }
    }
</style>
 


http://www.taodudu.cc/news/show-8457226.html

相关文章:

  • 历书中的哥伦布
  • GPS历书(Almanac)和星历(Ephemeris)有什么区别?
  • SSM之一点一滴:Object对象使用Field反射遍历书输出
  • how many days c语言,万年历书-C精粹的万年历C语言实例解析精粹这本书的万年历程序实在是看不懂, 爱问知识人...
  • GPS星历与历书的区别
  • GPS卫星 星历与历书的区别
  • GPS星历与历书
  • Java小白——三元运算符比较两个数获得大值
  • 小程序的三元表达式
  • 三元表达式多个判断条件
  • 三元运算符 比较三个数大小 三元操作符的类型务必一致
  • 【题解】【AcWing】3874. 三元组的最小距离
  • java 三元运算符比大小
  • 三元组的最小距离问题|数据结构常见小题05
  • 三元运算符完成三个数的大小顺序排列
  • 最小三元组距离
  • 【算法】三元组求最小距离
  • 小程序三元参数判断
  • Python算法——求解最小三元组距离
  • 求解最小三元组距离
  • maven pom.xml加载不进来
  • IDEA 中导入Maven项目Jar加载不进来
  • 怎么判断微信小程序是分享进来页面
  • 解决idea pom依赖 导入jar包导入不进来
  • maven打包成第三方jar包且把pom依赖包打入进来的方法
  • okhttp3.logging.HttpLoggingInterceptor 引不进来包问题,kotlin看不了源码
  • 关于maven打包时, 资源文件没有被打包进来的问题
  • maven打包时, 资源文件没有被打包进来的问题
  • 踩坑记录 明明存在类和依赖 但是就是import不进来 application文件不是叶子
  • 【idea与maven】idea创建springboot项目,maven 远程仓库,一部分包显示红色,jar包导入不进来(包含maven 的下载和配置)