个人中心切图

2023-01-13 16:32:56 +08:00
parent 36bcbab647
commit 25482cb612
41 changed files with 1090 additions and 75 deletions
--- a/components/Cn-grid-item/Cn-grid-item.vue
+++ b/components/Cn-grid-item/Cn-grid-item.vue
@@ -0,0 +1,70 @@
+
+<template>
+    <view class="grid-card-content-item" @click="$emit('click')">
+        <view class="grid-card-content-item-icon" :style="{background:background}">
+            <image class="grid-card-content-item-icon-2" mode="aspectFit" :src="src" />
+            <view class="grid-card-badge" v-if="badge > 0">{{badge}}</view>
+        </view>
+        <view class="grid-card-content-item-text">{{text || ''}}</view>
+    </view>
+</template>
+<script>
+export default {
+    props: ["src", "text", "badge", 'background'],
+    data () {
+        return {};
+    },
+    components: {}
+};
+</script>
+<style lang='scss'>
+.grid-card-content-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    height: 236rpx;
+
+    .grid-card-content-item-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 80rpx;
+        height: 80rpx;
+        background: rgba(78, 159, 255, 1);
+        border-radius: 20rpx;
+
+        .grid-card-content-item-icon-2 {
+            width: 40rpx;
+            height: 40rpx;
+        }
+
+        .grid-card-badge {
+            box-sizing: border-box;
+            position: absolute;
+            right: -14rpx;
+            top: -14rpx;
+            height: 30rpx;
+            min-width: 30rpx;
+            padding: 0 6rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: red;
+            font-size: 20rpx;
+            color: #fff;
+            border-radius: 20rpx;
+        }
+    }
+
+    .grid-card-content-item-text {
+        max-width: 80%;
+        text-align: center;
+        margin-top: 16rpx;
+        color: #111;
+        font-size: 28rpx;
+    }
+}
+</style>