sadjv3_user/pages/index/index.vue

1081 lines
26 KiB
Vue
Raw Normal View History

2024-06-05 19:16:02 +08:00
<template>
2024-06-12 15:52:21 +08:00
<view class="content">
<view class="index-head">
<view class="index-top">
<view class="index-top-left font-size-34">盛安到家</view>
<view class="index-top-mian">
<view class="index-top-mian-text">
<image src="../../static/index-nav-1.png" mode="widthFix"></image>
<span class="font-size-19">实名认证</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="index-top-mian-text">
<image src="../../static/index-nav-2.png" mode="widthFix"></image>
<span class="font-size-19">资质认证</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="index-top-mian-text">
<image src="../../static/index-nav-3.png" mode="widthFix"></image>
<span class="font-size-19">平台担保</span>
</view>
</view>
<view class="index-top-right">
<image src="../../static/index-nav-4.png" mode="widthFix"></image>
<image src="../../static/index-nav-5.png" mode="widthFix"></image>
2024-06-05 19:16:02 +08:00
</view>
</view>
2024-06-12 15:52:21 +08:00
<view class="index-mian width">
<view class="index-mian-select">
<uni-data-select
v-model="value"
:localdata="range"
@change="change"
></uni-data-select>
<image src="../../static/xiala.png" mode="widthFix"></image>
</view>
<view>
<uni-search-bar @confirm="search" :cancelext="'取消'" v-model="searchValue" @blur="blur" @input="input"
@clear="clear">
</uni-search-bar>
</view>
</view>
<view class="index-fenl width">
<view class="index-gun">
<view class="fenl">中医推拿</view>
<view class="fenl">小儿推拿</view>
<view class="fenl">产后康复</view>
<view class="fenl">SPA精油</view>
<view class="fenl">小儿推拿</view>
<view class="fenl">产后康复</view>
<view class="fenl">SPA精油</view>
<view class="fenl">小儿推拿</view>
<view class="fenl">产后康复</view>
<view class="fenl">SPA精油</view>
</view>
</view>
<view class="index-nav-bottom width">
<image src="../../static/index-nav-6.png" mode="widthFix"></image>
<image src="../../static/index-nav-7.png" mode="widthFix"></image>
</view>
</view>
<view class="title-star">
<view class="star-technician-top">
<view class="star-technician-top-text">
<span class="star-technician-name">明星技师</span>
<span class="star-technician-name-bot">Star technician</span>
</view>
<view class="star-technician-top-text">
<span class="star-technician-gengguo">查看更多></span>
</view>
</view>
</view>
<view class="star-technician width">
<view class="star-technician-mian">
<liu-goods-swiper :goodsList="goodsList" :imgWidth="160" :imgHeight="225" @clickItem="chooseItem" @cancellable='false'></liu-goods-swiper>
</view>
</view>
<view class="index-project width">
<view class="index-project-content">
<image src="../../static/index-fenglei1.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei2.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei3.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei4.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei10.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei5.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei6.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei7.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei8.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
<view class="index-project-content">
<image src="../../static/index-fenglei9.png" mode="widthFix"></image>
<span>深谙逃禅</span>
</view>
</view>
<view class="index-guanggao width">
<image class="index-guanggao-pintuan" src="../../static/pintuan.png" mode="widthFix"></image>
<view class="index-guanggao-right">
<image class="index-guanggao-right-cika" src="../../static/cika.png" mode="widthFix"></image>
<image class="index-guanggao-right-yuyue" src="../../static/yuyue.png" mode="widthFix"></image>
</view>
</view>
<view class="index-fujin">
<view class="index-fujin-title width">
<view class="index-fujin-title-left">
<image src="../../static/fujin-jishi.png" mode="widthFix"></image>
<span>附近技师</span>
</view>
<view class="index-fujin-title-right">
<span class="index-fujin-title-left-text">更多</span>
<span class="index-fujin-title-left-btn">>></span>
</view>
</view>
<view class="index-fujin-img width">
<view class="index-fujin-view">
<image class="index-fujin-view-img" src="../../static/pintuan.png" mode="widthFix"></image>
<view class="index-fujin-view-text">
<image src="../../static/fujin-dingwei.png" mode="widthFix"></image>
<span>1.2km</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
</view>
<view class="index-fujin-view">
<image class="index-fujin-view-img" src="../../static/pintuan.png" mode="widthFix"></image>
<view class="index-fujin-view-text">
<image src="../../static/fujin-dingwei.png" mode="widthFix"></image>
<span>1.2km</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
</view>
<view class="index-fujin-view">
<image class="index-fujin-view-img" src="../../static/pintuan.png" mode="widthFix"></image>
<view class="index-fujin-view-text">
<image src="../../static/fujin-dingwei.png" mode="widthFix"></image>
<span>1.2km</span>
2024-06-05 19:16:02 +08:00
</view>
</view>
2024-06-12 15:52:21 +08:00
</view>
<view class="index-fujin-jie">
<view class="index-fujin-jie-view">
<span class="index-fujin-jie-name">李安茹</span>
<span class="index-fujin-jie-id">中医推拿</span>
</view>
<view class="index-fujin-jie-view">
<span class="index-fujin-jie-name">李安茹</span>
<span class="index-fujin-jie-id">中医推拿</span>
</view>
<view class="index-fujin-jie-view">
<span class="index-fujin-jie-name">李安茹</span>
<span class="index-fujin-jie-id">中医推拿</span>
</view>
</view>
<view class="index-taocan width">
<view class="index-taocan-view">
<view class="index-taocan-view-nav" v-for="item in felNav" :key="item.id" @click="chengFel(item)">
<view class="index-taocan-view-nav-s">
<span class="index-taocan-view-nav-text" :class="[currentTabFl==item.id?'activeL':'activeH']">{{item.name}}</span>
<span class="index-taocan-view-nav-jie" :class="[currentTabFl==item.id?'activeXL':'activeXH']">{{item.content}}</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="fenjie"></view>
2024-06-05 19:16:02 +08:00
</view>
</view>
2024-06-12 15:52:21 +08:00
<view class="index-card">
<view class="index-card-view">
<view class="index-card-view-title">
<view class="index-card-view-title-left">古法十二经络</view>
<view class="index-card-view-title-right">助眠解压</view>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="index-card-mian">
<view class="index-card-mian-title marginTop">古法十二经络SPA</view>
<view class="index-card-mian-biao marginTop">
<view class="index-card-mian-biao-left">
助眠减压
</view>
<view class="index-card-mian-biao-right">
缓解疲劳
</view>
</view>
<view class="index-card-mian-time marginTop">
<image src="../../static/rumen-time.png" mode="widthFix"></image>
<span>100分钟</span>
</view>
<view class="index-card-mian-money marginTop">
<span class="index-card-mian-money-zhen">388</span>
<span class="index-card-mian-money-jia">500</span>
2024-06-05 19:16:02 +08:00
</view>
</view>
2024-06-12 15:52:21 +08:00
</view>
<view class="index-card-view">
<view class="index-card-view-title">
<view class="index-card-view-title-left">古法十二经络</view>
<view class="index-card-view-title-right">助眠解压</view>
</view>
<view class="index-card-mian">
<view class="index-card-mian-title marginTop">古法十二经络SPA</view>
<view class="index-card-mian-biao marginTop">
<view class="index-card-mian-biao-left">
助眠减压
</view>
<view class="index-card-mian-biao-right">
缓解疲劳
</view>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="index-card-mian-time marginTop">
<image src="../../static/rumen-time.png" mode="widthFix"></image>
<span>100分钟</span>
2024-06-05 19:16:02 +08:00
</view>
2024-06-12 15:52:21 +08:00
<view class="index-card-mian-money marginTop">
<span class="index-card-mian-money-zhen">388</span>
<span class="index-card-mian-money-jia">500</span>
2024-06-05 19:16:02 +08:00
</view>
</view>
</view>
</view>
</view>
2024-06-12 15:52:21 +08:00
<view class="body-view">
<!-- 使用scroll-view实现tabs滑动切换 -->
<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index" @click="swichMenu(index)">
<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
<text class="menu-topic-text">{{item.name}}</text>
<view class="menu-topic-bottom">
<view class="menu-topic-bottom-color"></view>
</view>
</view>
</view>
</scroll-view>
<!-- 内容 -->
<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
<view class="swiper-item-card">
<view class="swiper-back-img">
<image src="../../static/bofang.png" mode="widthFix"></image>
</view>
<view class="swiper-item">
<span>{{item.name}}</span>
<span>{{item.content}}</span>
</view>
</view>
<view class="swiper-item-card">
<view class="swiper-back-img">
<image src="../../static/bofang.png" mode="widthFix"></image>
</view>
<view class="swiper-item">
<span>{{item.name}}</span>
<span>{{item.content}}</span>
</view>
</view>
<view class="swiper-item-card">
<view class="swiper-back-img">
<image src="../../static/bofang.png" mode="widthFix"></image>
</view>
<view class="swiper-item">
<span>{{item.name}}</span>
<span>{{item.content}}</span>
</view>
</view>
<view class="swiper-item-card">
<view class="swiper-back-img">
<image src="../../static/bofang.png" mode="widthFix"></image>
</view>
<view class="swiper-item">
<span>{{item.name}}</span>
<span>{{item.content}}</span>
</view>
</view>
</swiper-item>
</swiper>
2024-06-05 19:16:02 +08:00
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
2024-06-12 15:52:21 +08:00
currentTabFl: 1,
felNav:[{
id:1,
content: '大家常买',
name: '热门精选'
},
{
id:2,
content: '优惠提前享',
name: '推荐套餐'
},
{
id:3,
name: '专业培训',
content: '特色专业'
},
{
id:4,
name: '更多优惠',
content: '更多'
},
],
scrollLeft:0,
tabs: [{
id: 1,
name: '推荐'
},
{
id: 2,
name: '附近'
},
{
id: 3,
name: '关注'
},
],
currentTab: 0,
tabCurrent: 'tabNum1',
// Tab切换内容
swiperDateList: [{
id: 1,
content: '中医推拿',
name:'李安茹',
},
{
id: 2,
content: '中医推拿',
name:'李安茹',
},
{
id: 3,
content: '中医推拿',
name:'李安茹',
},
2024-06-05 19:16:02 +08:00
],
2024-06-12 15:52:21 +08:00
searchValue: '123123',
value: 0,
range: [
{ value: 0, text: "篮球" },
{ value: 1, text: "足球" },
{ value: 2, text: "游泳" },
],
//列表数据
goodsList: [
{
id: 1,
name: '大甜梨',
descr: '又大又甜又脆巨好吃',
icon: '../../static/index-nav-6.png'
},{
id: 2,
name: '猕猴桃',
descr: '口感甜酸、可口',
icon: '../../static/index-nav-7.png'
},{
id: 3,
name: '樱桃',
descr: '又大又甜水还多',
icon: '../../static/index-nav-6.png'
},{
id: 4,
name: '牛油果',
descr: '果肉柔软、细腻',
icon: '../../static/index-nav-7.png'
},{
id: 5,
name: '提子',
descr: '又大又甜水还多',
icon: '../../static/index-nav-6.png'
},
]
2024-06-05 19:16:02 +08:00
}
},
2024-06-12 15:52:21 +08:00
onLoad() {
2024-06-05 19:16:02 +08:00
},
methods: {
2024-06-12 15:52:21 +08:00
chengFel(item){//大家常买。。。 导航切换
this.currentTabFl=item.id
2024-06-05 19:16:02 +08:00
},
2024-06-12 15:52:21 +08:00
swichMenu(id) {//视频导航
this.currentTab = id
console.log(11,id)
//this.tabCurrent = 'tabNum'+ id
2024-06-05 19:16:02 +08:00
2024-06-12 15:52:21 +08:00
// 滑动swiper后每个选项距离其父元素最左侧的距离
this.scrollLeft = 0;
for (let i = 0; i < id; i++) {
this.scrollLeft += 60
console.log(this.scrollLeft ,60,id)
};
},
swiperChange(e) {//视频导航
console.log(22,e.detail.current)
let index = e.detail.current
this.swichMenu(index)
2024-06-05 19:16:02 +08:00
},
2024-06-12 15:52:21 +08:00
//点击某一个item 推荐明星
chooseItem(item){
console.log("推荐明星",item)
// 点击拿到整个当前点击的item 执行业务逻辑
2024-06-05 19:16:02 +08:00
},
2024-06-12 15:52:21 +08:00
change(e) {
console.log("e:", e);
},
search(res) {
// uni.showToast({
// title: '搜索:' + res.value,
// icon: 'none'
// })
},
input(res) {
console.log('----input:', res)
},
clear(res) {
uni.showToast({
title: 'clear事件清除值为' + res.value,
icon: 'none'
2024-06-05 19:16:02 +08:00
})
2024-06-12 15:52:21 +08:00
},
blur(res) {
uni.showToast({
title: 'blur事件输入值为' + res.value,
icon: 'none'
})
},
2024-06-05 19:16:02 +08:00
}
}
</script>
2024-06-12 15:52:21 +08:00
<style scoped>
.menu-topic-act .menu-topic-bottom-color {
background: linear-gradient(90deg,rgba(234, 248, 245,0.7),rgba(132, 211, 196,0.7));
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
/* 字体 */
.font-size-19{
font-size: 19rpx;
}
.font-size-34{
font-size: 34.72rpx;
}
.width{
width: 95%;
}
/* 样式 */
.index-taocan-view-nav:last-child .fenjie{
display: none;
}
.index-taocan-view-nav-s{
2024-06-05 19:16:02 +08:00
width: 100%;
2024-06-12 15:52:21 +08:00
display: flex;
flex-direction: column;
align-items: center;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-taocan-view-nav{
width: 25%;
display: flex;
flex-direction: row;
align-items: center;
}
.swiper-item span:nth-child(1){
2024-06-05 19:16:02 +08:00
font-weight: bold;
2024-06-12 15:52:21 +08:00
font-size: 32rpx;
color: #333333;
margin:10px 0px;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.swiper-item span:nth-child(2){
ont-weight: 400;
font-size: 25rpx;
color: #999999;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.swiper-item{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
2024-06-05 19:16:02 +08:00
justify-content: center;
}
2024-06-12 15:52:21 +08:00
.swiper-item-card{
width: 337rpx;
display: flex;
flex-direction: column;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.swiper-back-img{
width: 100%;
height: 338rpx;
background-color:rgba(0, 0, 0, 0.2);
border-radius: 17rpx;
display: flex;
align-items: center;
justify-content: center;
background: url(../../static/yuyue.png) 100% no-repeat;
}
.swiper-back-img image{
width: 91.67rpx;
height: 93.06rpx;
}
.body-view {
width: 100%;
2024-06-05 19:16:02 +08:00
overflow: hidden;
}
2024-06-12 15:52:21 +08:00
/deep/.uni-scroll-view-content{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top-menu-view {
display: flex;
flex-direction: row;
justify-content: space-between;
white-space: nowrap;
background: linear-gradient(180deg,rgba(217, 240, 237,0.6),rgba(255, 255, 255,0.6));
background-color:rgba(1, 156, 136, 0.2);
height: 108rpx;
line-height: 108rpx;
}
.menu-topic-text {
font-size: 32rpx;
color: #676767;
padding: 10rpx 40rpx;
font-weight: 500;
}
.menu-topic-bottom {
position: absolute;
bottom: 0;
width: 100%;
}
.menu-topic-view {
display: inline-block;
white-space: nowrap;
height: 86rpx;
position: relative;
}
.menu-topic-act .menu-topic-bottom {
display: flex;
justify-content: center;
}
.menu-topic-act .menu-topic-text{
color: #000000;
font-weight: bold;
}
.menu-topic-bottom-color {
width: 62.5rpx;
height: 4px;
position: absolute;
z-index: 66;
margin-top: -23px;
}
/deep/.menu-topic-act{
position: relative;
}
.swiper-box-list {
width: 95%;
margin: 5px auto;
flex:1;
background-color: #FFFFFF;
height: 490px;
}
.swiper-topic-list {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
/deep/.uni-scroll-view::-webkit-scrollbar {
display: none
}
.index-card-mian-biao-left,.index-card-mian-biao-right{
padding: 5px 10px;
}
.index-card-mian-biao-right{
background-color:rgba(4, 184, 119, 0.12);
border-radius: 3rpx;
font-weight: 400;
font-size: 21rpx;
color: #0EBE80;
margin-left: 10px;
}
.index-card-mian-biao-left{
background-color:rgba(253, 197, 128, 0.2);
border-radius: 3rpx;
font-weight: 400;
font-size: 21rpx;
color: #FFA12D;
}
.index-card-mian-biao{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.index-card-mian-title{
font-weight: bold;
font-size: 31rpx;
color: #333333;
}
.marginTop{
margin-bottom: 10px;
}
.index-card-mian{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 10px;
}
.index-card-view-title-right{
width: 65px;
height: 47rpx;
line-height: 47rpx;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
2024-06-05 19:16:02 +08:00
text-align: center;
2024-06-12 15:52:21 +08:00
font-weight: 400;
font-size: 21rpx;
color: #fff;
position: absolute;
margin-left: 85px;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-card-view-title-left{
width: 95px;
height: 46.53rpx;
line-height: 46.53rpx;
font-weight: 400;
font-size: 21rpx;
2024-06-05 19:16:02 +08:00
text-align: center;
2024-06-12 15:52:21 +08:00
color:#333333;
border-top-left-radius: 30px;
background-color: rgba(176, 176, 176, 0.48);
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-card-view-title{
position: relative;
width: 100%;
height: 337.5rpx;
background: url(../../static/yuyue.png) 100% no-repeat;
display: flex;
flex-direction: row;
border-radius: 30px;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-card-mian-time,.index-card-mian-money{
display: flex;
flex-direction: row;
align-items: center;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-card-mian-money-zhen{
font-weight: 400;
font-size: 31rpx;
color: #000000;
}
.index-card-mian-money-jia{
margin-left: 10px;
font-weight: 400;
font-size: 24rpx;
color: #999999;
text-decoration-line: line-through;
}
.index-card-mian-time span{
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
.index-card-mian-time image{
width: 20.83rpx;
height: 20.83rpx;
margin-right: 10px;
}
.index-card-view{
width: 336.81rpx;
display: flex;
flex-direction: column;
}
.index-card{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
.fenjie{
width: 1rpx;
height: 32rpx;
background: #CCCCCC;
}
.index-taocan-view-nav-text{
font-weight: bold;
font-size: 28rpx;
}
.index-taocan-view-nav-jie{
font-weight: 400;
2024-06-05 19:16:02 +08:00
font-size: 22rpx;
}
2024-06-12 15:52:21 +08:00
.activeL{
color: #019C88;
}
.activeXL{
color: #2FC590;
}
.activeH{
color: #676767;
}
.activexH{
color: #999999;
}
.index-taocan-view{
2024-06-05 19:16:02 +08:00
width: 100%;
display: flex;
2024-06-12 15:52:21 +08:00
flex-direction: row;
2024-06-05 19:16:02 +08:00
align-items: center;
2024-06-12 15:52:21 +08:00
justify-content: space-between;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-taocan{
margin: 54px auto 23px auto;
display: flex;
flex-direction: column;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-fujin-jie-id{
font-weight: 400;
font-size: 25rpx;
color: #999999;
}
.index-fujin-jie-name{
margin-bottom: 5px;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.index-fujin{
width: 100%;
height: 290px;
background: linear-gradient(0deg, #CFFAEC, #F4FFFB);
margin: 20px 0;
}
.index-fujin-jie-view{
width: 222.22rpx;
2024-06-05 19:16:02 +08:00
display: flex;
flex-direction: column;
align-items: center;
2024-06-12 15:52:21 +08:00
margin-top: 15px;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-fujin-jie{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-fujin-view{
width: 222.22rpx;
height: 100%;
position: relative;
display: flex;
align-items: center;
}
.index-fujin-view-img{
width: 100%;
height: 312.5rpx;
border-radius: 14rpx;
}
.index-fujin-view-text{
width: 100%;
height: 63px;
2024-06-05 19:16:02 +08:00
display: flex;
2024-06-12 15:52:21 +08:00
flex-direction: row;
align-items: flex-end;
2024-06-05 19:16:02 +08:00
justify-content: center;
2024-06-12 15:52:21 +08:00
background: linear-gradient(4deg,rgba(103, 196, 184,0),rgba(182, 227, 221, 0.3));
border-radius: 0px 0px 7px 7px;
position: absolute;
margin-bottom: -93px;
padding-bottom: 13px;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
.index-fujin-img{
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.index-fujin-view-text span{
font-weight: 400;
font-size: 25rpx;
color: #FFFFFF;
}
.index-fujin-view-text image{
width: 20.83rpx;
height: 23.61rpx;
margin-right: 5px;
}
.index-fujin-title-left image{
width: 33.33rpx;
height: 33.33rpx;
margin-right: 10px;
}
.index-fujin-title-left span{
font-weight: bold;
font-size: 31rpx;
color: #333333;
}
.index-fujin-title-left-text,.index-fujin-title-left-btn{
font-weight: 400;
font-size: 21rpx;
color: #878787;
}
.index-fujin-title-left-btn{
margin-left: 10px;
}
.index-fujin-title-left,.index-fujin-title-right{
display: flex;
flex-direction: row;
align-items: center;
}
.index-fujin-title{
margin:0 auto;
padding: 20px 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.index-guanggao-pintuan{
width: 340.28rpx;
height: 100%;
}
.index-guanggao-right{
width: 340.28rpx;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.index-guanggao-right-cika,.index-guanggao-right-yuyue{
width: 100%;
height: 200.56rpx;
}
.index-guanggao{
margin:10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 426.39rpx;
}
.index-project{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin:10px auto;
}
.index-project-content image{
width: 68.75rpx;
height: 72.22rpx;
}
.index-project-content {
display: flex;
flex-direction: column;
flex-basis: 20%;
align-items: center;
justify-content: space-between;
margin-top: 15px;
height: 58px;
}
.star-technician-name{
font-weight: bold;
font-size: 37rpx;
color: #FFFFFF;
}
.star-technician-name-bot{
font-weight: 400;
font-size: 21rpx;
color: #FFFFFF;
opacity: 0.7;
margin-left: 10px;
}
.star-technician-gengguo{
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
}
.star-technician-top-text{
display: flex;
flex-direction: row;
align-items: center;
}
.title-star{
width: 95.3%;
margin: 0 auto;
display: flex;
height: 51px;
}
.star-technician-top{
width: 100%;
height: 100%;
padding: 0px 20px;
background-image: url(../../static/frame.png);
background-size: 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.star-technician-mian{
width: 100%;
height: 100%;
}
.star-technician{
position: relative;
margin: -15px auto 0px auto;
height: 327px;
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 0px 0px 29px 29px;
border: 4.5px solid #049E89;
padding: 0px 8px;
}
.index-gun{
width: 400px !important;
white-space: nowrap;
overflow-x: scroll;
}
.index-fenl{
overflow: hidden;
height: 40px;
margin: 0 auto;
}
.fenl:nth-child(1){
padding-left: 0px !important;
}
.fenl{
display: inline-block;
padding: 0px 10px;
text-align: center;
color: #666666;
font-weight: 500;
font-size: 34rpx;
}
.index-nav-bottom image{
width: 336.11rpx;
height: 182.64rpx;
}
.index-nav-bottom{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0px auto 20px auto;
}
/deep/.uni-select__selector{
width: 200px;
}
.index-mian-select image{
width: 16px;
height: 8px;
margin-left: 5px;
}
.index-mian-select{
display: flex;
flex-direction: row;
align-items: center;
}
.index-mian{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 10px auto;
}
/deep/.uni-select__input-box .uni-icons {
display: none;
}
/deep/.uni-select__input-text{
font-weight: bold;
font-size: 29rpx;
}
/deep/.uni-select{
border: 0px;
padding: 0px;
}
/deep/.uni-searchbar .uni-searchbar__cancel{
display: none;
}
/deep/.uni-searchbar{
padding: 0px;
}
/deep/.uni-searchbar__box{
border-radius: 30px !important;
width: 300px;
height: 63.89rpx;
}
.index-top-mian{
display: flex;
flex-direction: row;
}
.index-top-left{
color: #019C88;
font-weight: bold;
}
.index-top-right{
display: flex;
flex-direction: row;
align-items: center;
}
.index-top-right image{
width: 13px;
height: 12px;
margin-right: 5px;
}
.index-top-mian-text{
display: flex;
flex-direction: row;
align-items: center;
margin-left: 10px;
}
.index-top-mian-text span{
color: #A8BC87;
font-weight: 400;
margin-left: 5px;
}
.index-top-mian-text image{
width: 20.14rpx;
height: 15.28rpx;
}
.index-top{
width:95%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 auto;
}
.index-head{
width: 100%;
height:240px;
background: linear-gradient(4deg,rgba(189, 247, 214,0),rgba(143, 233, 212, 0.3));
display: flex;
align-items: flex-start;
flex-direction: column;
padding-top: 10px;
}
.content {
width: 100%;
height: 100vh;
overflow: auto;
2024-06-05 19:16:02 +08:00
}
2024-06-12 15:52:21 +08:00
</style>