68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<template>
|
|
<view class="s-card-wrapper" :class="{ isBorder: isBorder != undefined }">
|
|
<view class="s-card-title">{{ title }}</view>
|
|
<view class="tips" v-if="tips">{{ tips }}</view>
|
|
<view class="s-card-main">
|
|
<block v-for="(v, i) in list" :key="i">
|
|
<view class="s-card-item">
|
|
<view>{{ v.text }}</view>
|
|
{{ v.content }}
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
title: {
|
|
type: String,
|
|
},
|
|
tips: { type: String },
|
|
isBorder: { type: String },
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.s-card-wrapper {
|
|
margin-left: 70rpx;
|
|
margin-bottom: 50rpx;
|
|
border-bottom: 1rpx solid #e7e7e7;
|
|
.s-card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
.tips {
|
|
margin-bottom: 30rpx;
|
|
transform: translateY(-30rpx);
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
.s-card-main {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.s-card-item {
|
|
flex: 0 0 50%;
|
|
font-size: 33rpx;
|
|
// font-weight: 700;
|
|
color: #7737fe;
|
|
margin-bottom: 50rpx;
|
|
view {
|
|
margin-bottom: 18rpx;
|
|
font-size: 25rpx;
|
|
font-weight: 500;
|
|
color: #8c8c8c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.isBorder {
|
|
border: none;
|
|
}
|
|
</style>
|