后端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>
782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
