本文主要是介绍同城厨师上门做饭系统源码做菜预约做饭家宴代厨轰趴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>
这篇关于同城厨师上门做饭系统源码做菜预约做饭家宴代厨轰趴app源码厨师入住+厨师傅端/前端语言uniapp的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
