普兆健康管家前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

96 lines
2.0 KiB

<template>
<view class="view">
<view>
<view class="card" v-for="article in articleList" :key="article.id" @click="$utils.navigateTo(article.path)">
<image class="card-img" :src="article.url" mode="scaleToFill"></image>
</view>
</view>
<view class="ways__view">
<view class="way flex flex-column" v-for="(way, wIdx) in wayList" :key="wIdx" @click="$utils.navigateTo(way.path)">
<image class="way-icon" :src="way.url" mode="scaleToFill"></image>
<view class="way-desc">{{ way.desc }}</view>
<view class="way-title flex"><text style="margin-right: 4rpx;">{{ way.title }}</text><uv-icon name="arrow-right" color="#252545" size="24rpx"></uv-icon></view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
articleList: {
type: Array,
default() {
return []
}
},
wayList: {
type: Array,
default() {
return []
}
},
},
}
</script>
<style scoped lang="scss">
.view {
padding: 24rpx 32rpx 0 32rpx;
}
.card {
font-size: 0;
overflow: hidden;
border-radius: 32rpx;
background-image: linear-gradient(to right, #FAFAFF, #F3F3F3);
box-shadow: -5rpx -5rpx 20rpx 0 #FFFFFF,
10rpx 10rpx 20rpx 0 #AAAACC80,
4rpx 4rpx 10rpx 0 #AAAACC40,
-2rpx -2rpx 5rpx 0 #FFFFFF;
& + & {
margin-top: 32rpx;
}
&-img {
width: 100%;
height: calc((100vw - 32rpx*2) * 129 / 343);
}
}
.ways__view {
margin-top: 80rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 24rpx;
}
.way {
&-icon {
width: 80rpx;
height: 80rpx;
}
&-desc {
margin-top: 24rpx;
font-family: PingFang SC;
font-size: 22rpx;
font-weight: 400;
line-height: 1.4;
color: #989898;
}
&-title {
font-family: PingFang SC;
font-size: 24rpx;
font-weight: 400;
line-height: 1.4;
color: #252545;
}
}
</style>