|
|
<template>
|
|
|
<view>
|
|
|
<view class="container" :style="{ 'padding-top': statusBarHeight + 'px' }">
|
|
|
<image mode="aspectFill" class="top-bkg" src="~@/static/index/top-bkg.png" alt=""></image>
|
|
|
<view class="top" :style="{ 'padding-right': menuButtonRight + 'px' }">
|
|
|
<view class="position" @click="isShowSite = true">
|
|
|
<u-icon name="map-fill"></u-icon>
|
|
|
<view>{{ vuex_site.name }}</view>
|
|
|
<!-- <view>{{ vuex_location.city.replace(/(市|区|县)/, "") }}</view>-->
|
|
|
<u-icon name="arrow-down" size="22"></u-icon>
|
|
|
</view>
|
|
|
<view class="icon">
|
|
|
<text style="color:#fff;font-size: 28rpx;font-weight: 500;letter-spacing: 2rpx;">四世同堂整合照护平台</text>
|
|
|
<!-- <image src="~@/static/index/icon.png" mode="aspectFit" alt=""></image>-->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="search">
|
|
|
<view class="search__icon">
|
|
|
<u-icon name="search" size="50" color="#999"></u-icon>
|
|
|
</view>
|
|
|
<view class="search__content">
|
|
|
<u-input :clearable="false" :value="select.keyword" placeholder="请输入要搜索的内容" height="56"
|
|
|
:custom-style="inputStyle" @input="searchInput"></u-input>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
<!-- <view v-if="isShowSticky" class="search-sticky" :style="{
|
|
|
'padding-top': statusBarHeight + 'px',
|
|
|
'padding-right': menuButtonRight + 'px',
|
|
|
}">
|
|
|
<view class="search-sticky__position" @click="isShowSite = true">
|
|
|
<u-icon name="map-fill"></u-icon>
|
|
|
<view>{{ vuex_site.name }}</view>
|
|
|
<u-icon name="arrow-down" size="22"></u-icon>
|
|
|
</view>
|
|
|
|
|
|
<view class="search-sticky__search">
|
|
|
<view class="search-sticky__search--content">
|
|
|
<u-input :clearable="false" :value="select.keyword" placeholder="请输入要搜索的内容" height="46"
|
|
|
@input="searchInput"></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
<view class="swiper" style="padding-top:30rpx">
|
|
|
<u-swiper @click="goSwiper" :height="366" :list="banners" name="url"></u-swiper>
|
|
|
</view>
|
|
|
<view class="links-title">
|
|
|
<text></text><text>整合照护服务</text>
|
|
|
</view>
|
|
|
<view class="links">
|
|
|
<view v-for="item in links" :key="item.text" bg-color="transparent" @click="goLinks(item)">
|
|
|
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
<!-- <u-grid :col="3" :border="false">
|
|
|
<u-grid-item :custom-style="{'padding-top':'20rpx','padding-bottom':0}" v-for="item in links" :key="item.text" bg-color="transparent" @click="goLinks(item)">
|
|
|
<image class="icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
<view class="text">{{ item.text }}</view>
|
|
|
</u-grid-item>
|
|
|
</u-grid> -->
|
|
|
</view>
|
|
|
|
|
|
<view class="img1" @click="showYlbtMask = true">
|
|
|
<image src="~@/static/ylbt.png" alt="" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
|
|
|
<view class="hospitals">
|
|
|
<view class="hospitals__title">热门医院</view>
|
|
|
|
|
|
<view class="hospitals__content">
|
|
|
<view class="hospitals__content__item" @click="$u.throttle($u.route({
|
|
|
url: '/package_sub/pages/hotHospital/hotHospital',
|
|
|
params: {
|
|
|
id: item.id
|
|
|
}
|
|
|
}))" v-for="(item, index) in hospitals" :key="item.id">
|
|
|
<view class="left">
|
|
|
<image :src="item.cover ? item.cover.url : ''" alt="" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="title">{{ item.name }}</view>
|
|
|
<view class="tag" v-if="item.tags">
|
|
|
<view class="tag__item">{{ item.tags }}</view>
|
|
|
</view>
|
|
|
<view class="description"> {{ item.good_at }} </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="statistics">
|
|
|
<view class="block1">
|
|
|
<view class="text1">浴疗人次<text>2</text>万+</view>
|
|
|
<view class="text1">照护人数<text>15</text>万+</view>
|
|
|
<view class="text1">服务人次<text>200</text>万+</view>
|
|
|
<view class="text1">服务小时<text>2000</text>万+</view>
|
|
|
|
|
|
|
|
|
<image class="img" src="~@/static/index/block1.png" mode="aspectFit" alt=""></image>
|
|
|
</view>
|
|
|
<view class="block2">
|
|
|
<view class="text1"> <text>100</text><text>万人次</text> </view>
|
|
|
<view class="text2">医院陪护</view>
|
|
|
|
|
|
<image class="img" src="~@/static/index/block2.png" mode="aspectFit" alt=""></image>
|
|
|
</view>
|
|
|
<view class="block3">
|
|
|
<view class="text1"> <text>100</text><text>万人次</text> </view>
|
|
|
<view class="text2">居家照护</view>
|
|
|
|
|
|
<image class="img" src="~@/static/index/block3.png" mode="aspectFit" alt=""></image>
|
|
|
</view>
|
|
|
<view class="block4">
|
|
|
<view class="text1">
|
|
|
<view>联系我们</view>
|
|
|
<view>0519-81191800</view>
|
|
|
</view>
|
|
|
|
|
|
<image show-menu-by-longpress class="img" src="~@/static/index/code.jpg" mode="aspectFit" alt=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="honor">
|
|
|
<view class="honor__title">
|
|
|
<image src="~@/static/index/honor-title.png" alt="" mode="aspectFit"></image>
|
|
|
<text>资质荣誉</text>
|
|
|
</view>
|
|
|
|
|
|
<scroll-view class="scroll-content" scroll-x="true">
|
|
|
<image class="images" v-for="i in photos" :key="i.id" :src="i.image ? i.image.url : ''"
|
|
|
mode="aspectFit"></image>
|
|
|
</scroll-view>
|
|
|
</view> -->
|
|
|
|
|
|
<image class="bottom" src="~@/static/index/bottom.png" mode="aspectFit" alt=""></image>
|
|
|
|
|
|
<!-- <view class="ai" @click="$u.throttle(
|
|
|
$u.route({
|
|
|
url: '/pages/aichat/index',
|
|
|
})
|
|
|
)">
|
|
|
<image src="~@/static/index/ai.png" mode="aspectFit"></image>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
|
|
|
<!-- 选择站点 -->
|
|
|
<u-select v-model="isShowSite" value-name="id" @confirm="confirmSite" label-name="name"
|
|
|
:list="list_site"></u-select>
|
|
|
|
|
|
<u-top-tips :navbar-height="navbarHeight" ref="uTips"></u-top-tips>
|
|
|
|
|
|
<tabbar />
|
|
|
<PrivacyPopup />
|
|
|
<floatPhone></floatPhone>
|
|
|
|
|
|
<!-- 养老补贴弹层：全屏半透明底 + 中间活动图 -->
|
|
|
<view v-if="showYlbtMask" class="ylbt-mask" @click="closeYlbtMask">
|
|
|
<view class="ylbt-mask__box" @click.stop>
|
|
|
<view class="ylbt-mask__close" @click="closeYlbtMask">
|
|
|
<u-icon name="close" color="#ffffff" size="44"></u-icon>
|
|
|
</view>
|
|
|
<image
|
|
|
class="ylbt-mask__img"
|
|
|
src="/static/ylbtmask.png"
|
|
|
mode="widthFix"
|
|
|
@click="goOldAgeAllowanceFromMask"
|
|
|
></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Tabbar from "@/component/Tabbar/Tabbar.vue";
|
|
|
import PrivacyPopup from "@/component/privacy-popup/privacy-popup.vue";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
Tabbar,
|
|
|
PrivacyPopup,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showYlbtMask: false,
|
|
|
isShowSite: false,
|
|
|
list_site: [{
|
|
|
id: '',
|
|
|
name: '全部站点'
|
|
|
}],
|
|
|
|
|
|
isShowSticky: false,
|
|
|
scrollTop: 308,
|
|
|
statusBarHeight: 40,
|
|
|
menuButtonRight: 0,
|
|
|
|
|
|
inputStyle: {
|
|
|
width: "600rpx",
|
|
|
fontSize: "28rpx",
|
|
|
fontWeight: "500",
|
|
|
},
|
|
|
select: {
|
|
|
keyword: "",
|
|
|
},
|
|
|
links: [{
|
|
|
text: "就医服务",
|
|
|
icon: "/static/index/index1.png",
|
|
|
to: "/package_sub/pages/type/service",
|
|
|
},
|
|
|
{
|
|
|
text: "居家照护",
|
|
|
icon: "/static/index/index2.png",
|
|
|
to: "/package_sub/pages/ServiceList/ServiceList?type=2",
|
|
|
},{
|
|
|
text: "医院陪护",
|
|
|
icon: "/static/index/index3.png",
|
|
|
appid: 'wx0fee3573c1bb5ca8'
|
|
|
},{
|
|
|
text: "商城服务",
|
|
|
icon: "/static/index/index4.png",
|
|
|
to: "/package_sub/pages/Shop/Home",
|
|
|
},{
|
|
|
text: "公益服务",
|
|
|
icon: "/static/index/index5.png",
|
|
|
to: "/package_sub/pages/type/webview?link=https://sstt.115.langye.net/admin/#/login?redirect=%2Fdashboard",
|
|
|
},
|
|
|
{
|
|
|
text: "智能AI",
|
|
|
icon: "/static/index/index6.png",
|
|
|
upgrade: true,
|
|
|
}
|
|
|
],
|
|
|
|
|
|
hospitals: [],
|
|
|
banners: [],
|
|
|
photos: [],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getElScrollTop();
|
|
|
// if (this.$store.state.vuex_location.status !== 2) {
|
|
|
// this.$store.dispatch("getLocation");
|
|
|
// }
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.menuButtonRight =
|
|
|
uni.getSystemInfoSync().screenWidth -
|
|
|
uni.getMenuButtonBoundingClientRect().left +
|
|
|
10;
|
|
|
this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
|
|
|
|
|
|
this.getSiteList().then(_ => {
|
|
|
this.getHospital();
|
|
|
this.getBanner();
|
|
|
// this.getPhotos();
|
|
|
})
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
this.isShowSticky = e.scrollTop > this.scrollTop;
|
|
|
},
|
|
|
computed: {
|
|
|
navbarHeight() {
|
|
|
return getApp().globalData.navbarHeight;
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
closeYlbtMask() {
|
|
|
this.showYlbtMask = false
|
|
|
},
|
|
|
goOldAgeAllowanceFromMask() {
|
|
|
this.closeYlbtMask()
|
|
|
this.$u.throttle(
|
|
|
this.$u.route({
|
|
|
url: '/package_sub/pages/OldAgeAllowance/OldAgeAllowance'
|
|
|
})
|
|
|
)
|
|
|
},
|
|
|
goSwiper(e){
|
|
|
var data = this.banners[e]
|
|
|
if(data.jump_type==1 && data.jump_url){
|
|
|
uni.navigateTo({
|
|
|
url:data.jump_url
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
getElScrollTop() {
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
query
|
|
|
.select(".links")
|
|
|
.boundingClientRect((data) => {
|
|
|
if (data) {
|
|
|
this.scrollTop = data.top;
|
|
|
}
|
|
|
})
|
|
|
.exec();
|
|
|
},
|
|
|
searchInput(e) {},
|
|
|
|
|
|
async getSiteList() {
|
|
|
const res = await this.$u.api.otherSite()
|
|
|
this.list_site.push(...res)
|
|
|
let defaultValue = res.find(i => i.name === '常州')
|
|
|
if (defaultValue && !this.vuex_site.id) {
|
|
|
this.$u.vuex('vuex_site', defaultValue)
|
|
|
}
|
|
|
},
|
|
|
confirmSite(e) {
|
|
|
this.$u.vuex('vuex_site', e[0])
|
|
|
this.getHospital()
|
|
|
// this.getBanner()
|
|
|
// this.getPhotos()
|
|
|
},
|
|
|
goLinks(item) {
|
|
|
if (item.upgrade) {
|
|
|
this.$u.toast('功能升级中')
|
|
|
return
|
|
|
}
|
|
|
if (item.to) {
|
|
|
this.$u.throttle(
|
|
|
this.$u.route({
|
|
|
url: item.to,
|
|
|
})
|
|
|
)
|
|
|
}
|
|
|
if (item.appid) {
|
|
|
uni.navigateToMiniProgram({
|
|
|
appId: item.appid,
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
async getHospital() {
|
|
|
try {
|
|
|
const res = await this.$u.api.hospitalList({
|
|
|
page: 1,
|
|
|
page_size: 5,
|
|
|
site_id: this.vuex_site.id ? this.vuex_site.id : '',
|
|
|
"show_relation[0]": "site",
|
|
|
});
|
|
|
this.hospitals = res.data;
|
|
|
} catch (err) {}
|
|
|
},
|
|
|
async getBanner() {
|
|
|
try {
|
|
|
const res = await this.$u.api.banner({
|
|
|
position: 1,
|
|
|
// site_id: this.vuex_site.id ? this.vuex_site.id : '',
|
|
|
});
|
|
|
this.banners = res.map((i) => ({
|
|
|
...i,
|
|
|
url: i.image?.url ?? '',
|
|
|
}));
|
|
|
} catch (err) {}
|
|
|
},
|
|
|
async getPhotos() {
|
|
|
try {
|
|
|
const res = await this.$u.api.banner({
|
|
|
position: 2,
|
|
|
// site_id: this.vuex_site.id ? this.vuex_site.id : '',
|
|
|
});
|
|
|
this.photos = res
|
|
|
} catch (err) {}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
::v-deep .u-swiper-wrap {
|
|
|
overflow: inherit !important;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-swiper-indicator {
|
|
|
bottom: -30rpx !important;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-indicator-item-round-active {
|
|
|
background: #ca2328 !important;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-grid-item-box {
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
padding-bottom: calc(76px + 34px + 10px);
|
|
|
position: relative;
|
|
|
|
|
|
.top-bkg {
|
|
|
z-index: 0;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100vw;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 0 28rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.position {
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
letter-spacing: 3rpx;
|
|
|
font-weight: 500;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>view {
|
|
|
padding: 0 13rpx;
|
|
|
max-width: 160rpx;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
&>image {
|
|
|
width: 197rpx;
|
|
|
height: 72rpx;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.search {
|
|
|
height: 68rpx;
|
|
|
border-radius: 34rpx;
|
|
|
background: #ffffff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
|
|
|
padding: 20rpx 25rpx;
|
|
|
margin: 24rpx 26rpx 0 25rpx;
|
|
|
|
|
|
&__content {
|
|
|
margin-left: 18rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.search-sticky {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: url("~@/static/index/top-bkg.png") no-repeat;
|
|
|
background-size: cover;
|
|
|
position: sticky;
|
|
|
z-index: 5;
|
|
|
top: 0;
|
|
|
width: 100vw;
|
|
|
padding-bottom: 20rpx;
|
|
|
animation: fade 0.4s;
|
|
|
filter: drop-shadow(0 2rpx 6rpx #c20d1266);
|
|
|
|
|
|
@keyframes fade {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&__position {
|
|
|
flex: 0;
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
letter-spacing: 3rpx;
|
|
|
font-weight: 500;
|
|
|
white-space: nowrap;
|
|
|
padding: 0 16rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>view {
|
|
|
padding: 0 10rpx;
|
|
|
max-width: 160rpx;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&__search {
|
|
|
flex: 1;
|
|
|
height: 64rpx;
|
|
|
border-radius: 34rpx;
|
|
|
background: #ffffff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
|
|
|
padding: 20rpx 25rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.swiper {
|
|
|
margin-top: 24rpx;
|
|
|
padding: 0 25rpx;
|
|
|
}
|
|
|
|
|
|
.links-title {
|
|
|
padding: 0 25rpx;
|
|
|
margin-top: calc(43rpx + 10rpx);
|
|
|
font-size: 29rpx;
|
|
|
color: #191919;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 5rpx;
|
|
|
|
|
|
&>text:first-child {
|
|
|
width: 12rpx;
|
|
|
height: 57rpx;
|
|
|
border-radius: 20rpx;
|
|
|
display: inline-block;
|
|
|
margin-right: 15rpx;
|
|
|
background: linear-gradient(to bottom,
|
|
|
#ef9478 0%,
|
|
|
#c10d12 94%,
|
|
|
#d03434 100%);
|
|
|
}
|
|
|
|
|
|
.c3 {
|
|
|
color: #3e3e3e
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.links {
|
|
|
padding: 0 25rpx;
|
|
|
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&>view {
|
|
|
font-size: 0;
|
|
|
padding-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
width: 220rpx;
|
|
|
height: 160rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 16rpx;
|
|
|
color: #333333;
|
|
|
font-weight: 500;
|
|
|
margin-top: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.img1 {
|
|
|
margin-top: 26rpx;
|
|
|
padding: 0 25rpx;
|
|
|
font-size: 0;
|
|
|
|
|
|
&>image {
|
|
|
width: 100%;
|
|
|
height: 223rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.hospitals {
|
|
|
background: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
margin: 26rpx 25rpx 0;
|
|
|
padding: 28rpx 25rpx;
|
|
|
|
|
|
&__title {
|
|
|
font-size: 28rpx;
|
|
|
color: #000000;
|
|
|
font-weight: bold;
|
|
|
padding: 0 32rpx 28rpx;
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
|
|
|
&__content {
|
|
|
max-height: 516rpx;
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
&__item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.left {
|
|
|
&>image {
|
|
|
height: 162rpx;
|
|
|
width: 250rpx;
|
|
|
border-radius: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
margin-left: 25rpx;
|
|
|
|
|
|
.title {
|
|
|
font-size: 28rpx;
|
|
|
color: #000000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.tag {
|
|
|
margin-top: 16rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&__item {
|
|
|
padding: 5rpx 16rpx;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 31rpx;
|
|
|
font-weight: 500;
|
|
|
|
|
|
&:nth-child(1) {
|
|
|
color: #ca2328;
|
|
|
background-color: #faefef;
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
color: #f38628;
|
|
|
background-color: #fcf3e9;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tag__item+.tag__item {
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.description {
|
|
|
max-width: 320rpx;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 24rpx;
|
|
|
color: #929196;
|
|
|
font-weight: 500;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.statistics {
|
|
|
margin: 26rpx 25rpx 0;
|
|
|
display: grid;
|
|
|
grid-template-columns: 286rpx 182rpx 182rpx;
|
|
|
grid-template-rows: 203rpx 203rpx;
|
|
|
grid-gap: 25rpx;
|
|
|
grid-template-areas:
|
|
|
"block1 block2 block3"
|
|
|
"block1 block4 block4";
|
|
|
|
|
|
@for $index from 1 through 4 {
|
|
|
.block#{$index} {
|
|
|
border-radius: 10rpx;
|
|
|
grid-area: block#{$index};
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.block1 {
|
|
|
background: linear-gradient(-90deg,
|
|
|
#e26165 0%,
|
|
|
#c10d12 94%,
|
|
|
#c10d12 100%);
|
|
|
position: relative;
|
|
|
|
|
|
padding: 55rpx 0 0 20rpx;
|
|
|
.text1 {
|
|
|
color:#f7dddf;
|
|
|
font-size: 24rpx;
|
|
|
padding-bottom:34rpx;
|
|
|
position: relative;
|
|
|
z-index:1;
|
|
|
&>text{
|
|
|
font-weight: bold;
|
|
|
font-size: 36rpx;
|
|
|
color: #fff;
|
|
|
margin-left:20rpx;
|
|
|
margin-right:5rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 22rpx;
|
|
|
color: #ffffff;
|
|
|
font-weight: 500;
|
|
|
padding: 17rpx 0 0 34rpx;
|
|
|
}
|
|
|
|
|
|
.order {
|
|
|
font-size: 24rpx;
|
|
|
color: #c20d12;
|
|
|
font-weight: 500;
|
|
|
padding: 9rpx 22rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
display: inline-block;
|
|
|
margin: 18rpx 0 0 34rpx;
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
height: 190rpx;
|
|
|
width: 152rpx;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
bottom: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.block2 {
|
|
|
position: relative;
|
|
|
background: linear-gradient(to bottom, #f3d4d4, #f2edf0);
|
|
|
|
|
|
.text1 {
|
|
|
text-align: center;
|
|
|
padding:0 20rpx;
|
|
|
padding-top: 50rpx;
|
|
|
|
|
|
text:nth-child(1) {
|
|
|
font-size: 36rpx;
|
|
|
color: #ca3831;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
text:nth-child(2) {
|
|
|
font-size: 23rpx;
|
|
|
color: #929196;
|
|
|
font-weight: 500;
|
|
|
margin-left:5rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 24rpx;
|
|
|
color: #202020;
|
|
|
font-weight: 500;
|
|
|
padding:0 20rpx;
|
|
|
padding-top: 10rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
width: 114rpx;
|
|
|
height: 114rpx;
|
|
|
position: absolute;
|
|
|
right: 10rpx;
|
|
|
bottom: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.block3 {
|
|
|
position: relative;
|
|
|
background: linear-gradient(to bottom, #f7e9dd, #f4f1f1);
|
|
|
|
|
|
.text1 {
|
|
|
text-align: center;
|
|
|
padding:0 20rpx;
|
|
|
padding-top: 50rpx;
|
|
|
|
|
|
text:nth-child(1) {
|
|
|
font-size: 36rpx;
|
|
|
color: #ca3831;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
text:nth-child(2) {
|
|
|
font-size: 23rpx;
|
|
|
color: #929196;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 24rpx;
|
|
|
color: #202020;
|
|
|
font-weight: 500;
|
|
|
padding: 0 20rpx;
|
|
|
padding-top: 10rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
width: 123rpx;
|
|
|
height: 127rpx;
|
|
|
position: absolute;
|
|
|
right: 10rpx;
|
|
|
bottom: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.block4 {
|
|
|
position: relative;
|
|
|
background: #dee5f9;
|
|
|
|
|
|
.text1 {
|
|
|
font-size: 28rpx;
|
|
|
color: #6c70c3;
|
|
|
font-weight: bold;
|
|
|
position: absolute;
|
|
|
left: 20rpx;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
&>view:last-child{
|
|
|
font-size: 26rpx;
|
|
|
color:#202020;
|
|
|
margin-top: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.img {
|
|
|
position: absolute;
|
|
|
width: 160rpx;
|
|
|
height: 160rpx;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
right: 15rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.honor {
|
|
|
background-color: #ede8dc;
|
|
|
padding: 27rpx 40rpx;
|
|
|
margin-top: 38rpx;
|
|
|
|
|
|
&__title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>image {
|
|
|
width: 31rpx;
|
|
|
height: 36rpx;
|
|
|
}
|
|
|
|
|
|
&>text {
|
|
|
font-size: 28rpx;
|
|
|
color: #000000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.scroll-content {
|
|
|
margin-top: 27rpx;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
.images {
|
|
|
height: 200rpx;
|
|
|
width: 311rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
margin: 50rpx auto 20rpx;
|
|
|
width: 700rpx;
|
|
|
height: 45rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.ai {
|
|
|
position: fixed;
|
|
|
bottom: 180rpx;
|
|
|
bottom: calc(constant(safe-area-inset-bottom) + 180rpx);
|
|
|
bottom: calc(env(safe-area-inset-bottom) + 180rpx);
|
|
|
right: 36rpx;
|
|
|
filter: drop-shadow(2rpx 2rpx 4rpx #999);
|
|
|
|
|
|
image {
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ylbt-mask {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
z-index: 100000;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 48rpx 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.ylbt-mask__box {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.ylbt-mask__close {
|
|
|
position: absolute;
|
|
|
top: -29rpx;
|
|
|
right: -21rpx;
|
|
|
z-index: 2;
|
|
|
padding: 10rpx;
|
|
|
line-height: 1;
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.ylbt-mask__img {
|
|
|
width: 100%;
|
|
|
display: block;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
</style> |
