红色移风调整

src/views/next/screen-content-right/hsyf-right/index.vue

@@ -16,7 +16,7 @@
 
                 </div>
                 <div class='card h292' style="margin-top: 8px;">
-                        <screen-title>
+                        <!-- <screen-title>
                                 <div slot="left" class="screen-title-left">支部风采</div>
                         </screen-title>
                         <div class="card-item-zbfc">
@@ -30,17 +30,27 @@
                                         上泊村为村民发放政法宣传资料
                                         <img src="@/assets/images/common/carousel-right.png" alt="">
                                 </div>
+                        </div> -->
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党员风采</div>
+                        </screen-title>
+                        <div class="card-item-dyfc">
+                                <div class="item" v-for="(item, index) in partList" :key="index">
+                                        <img :src="item.imgSrc" alt="">
+                                        <div class="name">{{ item.name }}</div>
+                                        <div class="unit">{{ item.unit }}</div>
+                                        <div class="title">{{ item.title }}</div>
+                                </div>
                         </div>
                 </div>
                 <div class='card h292 m-top12'>
                         <screen-title>
-                                <div slot="left" class="screen-title-left">党务公开</div>
+                                <div slot="left" class="screen-title-left">移风心愿</div>
                         </screen-title>
-                        <div class="card-item-dwgk">
+                        <div class="card-item-yfxy">
-                                <div class="item" v-for="(item, index) in policyList" :key="index">
+                                <div class="item" v-for="(item, index) in wishList" :key="index">
-                                        <div class="unit">{{ item.unit }}</div>
+                                        <img :src="item.imgSrc" alt="">
-                                        <div class="title">{{ item.title }}</div>
+                                        <div class="name">{{ item.name }}</div>
-                                        <div class="time">{{ item.time }}</div>
                                 </div>
                         </div>
                 </div>
@@ -75,33 +85,44 @@ export default {
                                 require('@/assets/images/resource/zbfc/4.jpg'),
                                 require('@/assets/images/resource/zbfc/5.jpg'),
                         ],
-                        policyList: [
+                        wishList: [
+                                {
+                                        imgSrc: require('@/assets/images/resource/yfxy/1.png'),
+                                        name: '“移”点心愿',
+                                },
                                 {
-                                        unit: '中共青岛市...',
+                                        imgSrc: require('@/assets/images/resource/yfxy/2.png'),
-                                        title: '关于公开基层党委在新···',
+                                        name: '“移”列清单',
-                                        time: '2024-01-02'
                                 },
                                 {
-                                        unit: '中共青岛市...',
+                                        imgSrc: require('@/assets/images/resource/yfxy/3.png'),
-                                        title: '即墨区水利局2023年国···',
+                                        name: '“移”语化开',
-                                        time: '2023-12-01'
                                 },
                                 {
-                                        unit: '中共青岛市...',
+                                        imgSrc: require('@/assets/images/resource/yfxy/4.png'),
-                                        title: '青岛市即墨区人民政府···',
+                                        name: '“移”站到家',
-                                        time: '2023-09-22'
+                                }
+                        ],
+                        partList: [
+                                {
+                                        name: '徐法佑',
+                                        unit: '徐家沟村人',
+                                        title: '丹心一片风华百年带着两个兵，敢挡一个团',
+                                        imgSrc: require('@/assets/images/resource/dyfc/1.jpg')
                                 },
                                 {
-                                        unit: '中共青岛市...',
+                                        name: '傅祖聪',
-                                        title: '青岛市卫生健康委员会···',
+                                        unit: '移风中学',
-                                        time: '2023-09-13'
+                                        title: '培桃育李四十三载乐善好施奉献一生',
+                                        imgSrc: require('@/assets/images/resource/dyfc/2.jpg')
                                 },
                                 {
-                                        unit: '中共青岛市...',
+                                        name: '朱爱香',
-                                        title: '农业局关于印发《即墨···',
+                                        unit: '太平庄村人',
-                                        time: '2023-05-06'
+                                        title: '一座大棚撑起新型农民致富梦',
+                                        imgSrc: require('@/assets/images/resource/dyfc/3.jpg')
                                 }
-                        ]
+                        ],
                 };
         },
         created() {
@@ -123,11 +144,12 @@ export default {
 .card {
         width: 100%;
         @include flex(column);
-        @include flex(column);
+
         &-item-djhd {
                 padding: 16px;
                 box-sizing: border-box;
                 @include flex(column);
+
                 >.item {
                         margin-bottom: 4px;
 
@@ -150,43 +172,85 @@ export default {
                 }
         }
 
-        &-item-zbfc {
-                padding: 16px;
-                box-sizing: border-box;
 
-                .tabs {
+        &-item-dyfc {
                 display: flex;
-                        align-items: center;
+                padding: 16px 16px 21px 16px;
-                        justify-content: center;
+                box-sizing: border-box;
-                        margin-top: 21px;
+
-                        background: linear-gradient(to left, #ecf5fd00 0%, #0e5eaa 50%, #ecf5fd00 100%);
+                .item {
+                        @include flex(column);
+                        border: 1px solid #77A5D8;
+                        padding: 5px;
+                        box-sizing: border-box;
+                        margin-right: 4px;
 
                         img {
-                                width: 42px;
+                                width: 130px;
-                                height: 42px;
+                                height: 80px;
                         }
+
+                        .name {
+                                margin: 11px 0 8px 0;
+                                padding-left: 12px;
+                                position: relative;
+
+                                &::after {
+                                        content: '';
+                                        width: 4px;
+                                        height: 4px;
+                                        border-radius: 4px;
+                                        background: #6BEAC6;
+                                        position: absolute;
+                                        left: 2px;
+                                        top: 10px;
                                 }
+
                         }
 
-        &-item-dwgk {
+                        .unit {
-                @include flex(column);
+                                font-size: 12px;
-                padding: 16px;
+                                padding: 0 5px;
+                                color: #BDCEEA;
+                                margin-bottom: 9px;
+                        }
 
-                >.item {
+                        .title {
-                        display: flex;
-                        height: 44px;
-                        align-items: center;
-                        padding: 13px 9px;
-                        box-sizing: border-box;
-                        justify-content: space-between;
-                        .time {
                                 font-size: 14px;
-                                color: #BCD0F0;
+                                padding: 0 5px;
+                                color: #DBE9FF;
+                        }
+                }
         }
 
-                        &:nth-child(odd) {
+        &-item-yfxy {
-                                background: rgb(44, 103, 208, .46);
+                padding: 16px;
+                display: grid;
+                grid-template-columns: 50% 50%;
+                grid-template-rows: 48% 48%;
+                grid-gap: 8px 5px;
 
+                >.item {
+                        position: relative;
+                        .name {
+                                width: 97px;
+                                height: 18px;
+                                margin: 0 auto;
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                transform: translate(-50%, -50%);
+                                z-index: 1;
+                        }
+                        &::after{
+                                content: '';
+                                position: absolute;
+                                bottom: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                                background: #001428 ;
+                                opacity: .5;
                         }
                 }
         }