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.
185 lines
3.2 KiB
185 lines
3.2 KiB
<template>
|
|
<view :class="['card', `card-${index % 5}`]">
|
|
<view class="header">
|
|
<view class="index">{{ getNum(index) }}</view>
|
|
<view class="intro">
|
|
<view class="title">{{ data.title }}</view>
|
|
<view class="desc">{{ data.desc }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<image class="img" :src="data.url" mode="aspectFit"></image>
|
|
<view class="flex flex-column">
|
|
<view class="use">{{ data.use }}</view>
|
|
<view class="name-zh">{{ data.name }}</view>
|
|
<view class="name-en">{{ data.nameEn }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
getNum(index) {
|
|
let num = index + 1
|
|
return num < 10 ? `0${num}` : num
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$header-height: 374rpx;
|
|
|
|
.card {
|
|
width: 100%;
|
|
height: auto;
|
|
padding-top: calc(#{$header-height} - 8rpx);
|
|
}
|
|
|
|
.header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -8rpx;
|
|
width: calc(100% + 8rpx * 2);
|
|
height: 374rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
border-top-left-radius: 64rpx;
|
|
border-top-right-radius: 64rpx;
|
|
|
|
.index {
|
|
font-size: 128rpx;
|
|
font-weight: 900;
|
|
line-height: 1.4;
|
|
font-family: HarmonyOS Sans;
|
|
color: transparent;
|
|
background-image: linear-gradient(#FFFFFF, #FFFFFF00);
|
|
background-clip: text;
|
|
display: inline-block;
|
|
}
|
|
|
|
.intro {
|
|
position: absolute;
|
|
left: 32rpx;
|
|
bottom: 32rpx;
|
|
width: calc(100% - 32rpx * 2);
|
|
font-family: PingFang SC;
|
|
color: #FFFFFF;
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 16rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
.img {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
// margin: 48rpx 0;
|
|
}
|
|
|
|
.use{
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 48rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
}
|
|
|
|
.name {
|
|
&-zh {
|
|
margin: 16rpx 0;
|
|
font-size: 64rpx;
|
|
font-weight: 900;
|
|
line-height: 1.4;
|
|
font-family: HarmonyOS Sans;
|
|
color: transparent;
|
|
background-clip: text;
|
|
display: inline-block;
|
|
}
|
|
|
|
&-en {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
line-height: 1.4;
|
|
color: #989898;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
&-0 {
|
|
$color: linear-gradient(to right, #667EE2, #77BDDF);
|
|
|
|
.header,
|
|
.name-zh {
|
|
background-image: $color;
|
|
}
|
|
}
|
|
}
|
|
.card {
|
|
&-1 {
|
|
$color: linear-gradient(to right, #BB7721, #EBBF5B);
|
|
|
|
.header,
|
|
.name-zh {
|
|
background-image: $color;
|
|
}
|
|
}
|
|
}
|
|
.card {
|
|
&-2 {
|
|
$color: linear-gradient(to right, #72281E, #AA4E3F);
|
|
|
|
.header,
|
|
.name-zh {
|
|
background-image: $color;
|
|
}
|
|
}
|
|
}
|
|
.card {
|
|
&-3 {
|
|
$color: linear-gradient(to right, #493489, #8360F6);
|
|
|
|
.header,
|
|
.name-zh {
|
|
background-image: $color;
|
|
}
|
|
}
|
|
}
|
|
.card {
|
|
&-4 {
|
|
$color: linear-gradient(to right, #699656, #B7D39C);
|
|
|
|
.header,
|
|
.name-zh {
|
|
background-image: $color;
|
|
}
|
|
}
|
|
}
|
|
</style>
|