1081 lines
26 KiB
Vue
1081 lines
26 KiB
Vue
<template>
|
||
<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>
|
||
</view>
|
||
<view class="index-top-mian-text">
|
||
<image src="../../static/index-nav-2.png" mode="widthFix"></image>
|
||
<span class="font-size-19">资质认证</span>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
<view class="fenjie"></view>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
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:'李安茹',
|
||
},
|
||
|
||
],
|
||
|
||
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'
|
||
},
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
chengFel(item){//大家常买。。。 导航切换
|
||
this.currentTabFl=item.id
|
||
},
|
||
swichMenu(id) {//视频导航
|
||
this.currentTab = id
|
||
console.log(11,id)
|
||
//this.tabCurrent = 'tabNum'+ id
|
||
|
||
// 滑动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)
|
||
|
||
},
|
||
//点击某一个item 推荐明星
|
||
chooseItem(item){
|
||
console.log("推荐明星",item)
|
||
// 点击拿到整个当前点击的item 执行业务逻辑
|
||
},
|
||
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'
|
||
})
|
||
},
|
||
blur(res) {
|
||
uni.showToast({
|
||
title: 'blur事件，输入值为：' + res.value,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<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));
|
||
}
|
||
|
||
|
||
/* 字体 */
|
||
.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{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.index-taocan-view-nav{
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.swiper-item span:nth-child(1){
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin:10px 0px;
|
||
}
|
||
.swiper-item span:nth-child(2){
|
||
ont-weight: 400;
|
||
font-size: 25rpx;
|
||
color: #999999;
|
||
}
|
||
.swiper-item{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.swiper-item-card{
|
||
width: 337rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.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%;
|
||
overflow: hidden;
|
||
}
|
||
/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;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 21rpx;
|
||
color: #fff;
|
||
position: absolute;
|
||
margin-left: 85px;
|
||
}
|
||
.index-card-view-title-left{
|
||
width: 95px;
|
||
height: 46.53rpx;
|
||
line-height: 46.53rpx;
|
||
font-weight: 400;
|
||
font-size: 21rpx;
|
||
text-align: center;
|
||
color:#333333;
|
||
border-top-left-radius: 30px;
|
||
background-color: rgba(176, 176, 176, 0.48);
|
||
}
|
||
.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;
|
||
}
|
||
.index-card-mian-time,.index-card-mian-money{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.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;
|
||
font-size: 22rpx;
|
||
}
|
||
.activeL{
|
||
color: #019C88;
|
||
}
|
||
.activeXL{
|
||
color: #2FC590;
|
||
}
|
||
.activeH{
|
||
color: #676767;
|
||
}
|
||
.activexH{
|
||
color: #999999;
|
||
}
|
||
|
||
.index-taocan-view{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.index-taocan{
|
||
margin: 54px auto 23px auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
}
|
||
.index-fujin-jie{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.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;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
</style>
|