首页页面提交

落日与鲸

2025-02-22 73050e1572f4e17778dc1e2fef97b7e4d4e702a8

首页页面提交

 pages.json

@@ -3,7 +3,15 @@
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
                "navigationBarTitleText": "uni-app",
                "navigationStyle": "custom"
            }
        },
        {
            "path" : "pages/components/certificate/certificate",
            "style" : 
            {
                "navigationBarTitleText" : ""
            }
        }
    ],

 pages/components/certificate/certificate.vue

New file
@@ -0,0 +1,127 @@
<template>
    <view>
        <u-popup :show="show" mode="center" @open="open">
            <view class="popup_main">
                <view class="popup_content flex flex-column a-center">
                    <text class="fs-35 font-bold color3 mt-46">党员证件</text>
                    <view class="bg font-w500 fs-23 mt-38 flex  flex-column a-center">
                        <image src="/static/home/img9.png" class="w-133 h-156 mt-40" mode=""></image>
                        <view class="flex mt-8">
                            <view class="flex flex-column mr-40 lh-48">
                                <text>姓名：</text>
                                <text>身份证号码：</text>
                                <text>所在党组织：</text>
                            </view>
                            <view class="flex flex-column a-end lh-48">
                                <text>李雷</text>
                                <text>500000000000000000</text>
                                <text>成都市锦江区XXXXX部门</text>

                            </view>
                        </view>

                    </view>
                    <view class="flex a-center mt-31">
                        <view class="btn_left" @click="onclose">
                            关闭
                        </view>
                        <view class="btn_right">
                            编辑
                        </view>
                    </view>

                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        props: {
            show: Boolean
        },
        data() {
            return {

            };
        },
        methods: {
            open() {

            },
		
            onclose() {
                this.show =false
            },
        },
        created() {
        },
    }
</script>

<style lang="scss">
    .color3 {
        color: #fff;
    }

    /deep/ .u-popup__content {
        width: 635rpx;
        height: 654rpx;
        border-radius: 40rpx;
    }

    .popup_main {
        width: 635rpx;
        height: 654rpx;
        border-radius: 40rpx;
        background-image: url('@/static/home/bg1.png');
        /* 背景图片铺满容器 */
        background-size: cover;
        /* 背景图片不重复 */
        background-repeat: no-repeat;
        /* 背景图片居中显示 */
        background-position: center;
        /* 设置容器的宽度和高度 */
    }

    .bg {

        width: 577rpx;
        height: 371rpx;
        background-image: url('@/static/home/bg2.png');
        /* 背景图片铺满容器 */
        background-size: cover;
        /* 背景图片不重复 */
        background-repeat: no-repeat;
        /* 背景图片居中显示 */
        background-position: center;
    }

    .btn_left {
        width: 212rpx;
        height: 77rpx;
        border-radius: 48rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.8);
        font-size: 27rpx;
        color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn_right {
        width: 212rpx;
        height: 77rpx;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border: 2rpx solid #fff;
        border-radius: 48rpx;
        font-weight: 600;
        font-size: 27rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 33rpx;
    }
</style>

 pages/index/index.vue

@@ -1,53 +1,319 @@
<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
            <u-button type="primary" icon="map" text="图标按钮"></u-button>
        <view class="top_content">
            <image src="/static/home/bg@2x.png" class="bg-img vw100" style="z-index: 1;" mode=""></image>
            <view class="main">
                <image src="/static/home/img6.png" class="h-85" mode=""></image>
                <image class="w-275 h-28 mt-15" src="/static/home/img3.png" mode=""></image>
                <view class="flex a-center mt-17   mb-31">
                    <image class="h-32" src="/static/home/img5.png" mode=""></image>
        </view>
                <swiper class="swiper " :indicator-dots="false" :autoplay="true" :interval="3000">
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    </swiper-item>
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    </swiper-item>
                    <swiper-item>
                        <image style="height: 270rpx;width: 688rpx;" src="/static/home/img2.png" mode=""></image>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="pt-38 pl-31 pr-31 flex flex-column">
            <view class="flex j-between a-center">
                <text class="color1">工作台</text>
                <text class="color2" @click="showData =!showData">查看更多</text>
            </view>
            <view class="flex flex-wrap j-between">
                <view class="pt-38 pb-38 bg1 w-333 flex br-19 mt-19 a-center">
                    <image class="w-81 h-77 ml-38" src="/static/home/img4.png" mode=""></image>
                    <text class="ml-37">诉求录入</text>
                </view>
                <view class="pt-38  pb-38 bg1 w-333 mt-19 br-19 flex a-center">
                    <image class="w-81 h-77 ml-38" src="/static/home/img2.png" mode=""></image>
                    <text class="ml-37">诉求列表</text>
                </view>
                <view class="pt-38 pb-38 bg1 w-333 br-19 mt-19 flex a-center">
                    <image class="w-79 h-77 ml-38" src="/static/home/img1.png" mode=""></image>
                    <text class="ml-37">回访评价</text>
                </view>
                <view class="pt-38 pb-38 bg1 w-333 br-19 mt-19 flex a-center">
                    <image class="w-81 h-77 ml-38" src="/static/home/img8.png" mode=""></image>
                    <text class="ml-37">分析统计</text>
                </view>
                <view class="pt-38 pb-38 bg1 w-333 br-19 mt-19 flex a-center" @click="onClick()" v-if="showData">
                    <image class="w-94 h-77 ml-38" src="/static/home/img7.png" mode=""></image>
                    <text class="ml-37">党员证</text>
                </view>

            </view>
            <view class="flex j-between a-center mt-38">
                <text class="color1">消息通知</text>
            </view>
            <view class=" mt-15">
                <view class="flex a-center">
                    <view class="msg mr-19" @click="isactive=1" :class="isactive==1? 'active':''">
                        消息
                        <view class="tips">
                            6
                        </view>
                    </view>
                    <view class="representative" @click="isactive=2" :class="isactive==2? 'active':''">
                        待办
                        <view class="tips">
                            6
                        </view>
                    </view>
                </view>
                <view class="list mt-29">
                    <view class="flex a-center mb-27" v-for="item in 5">
                        <view class="avater pb-33">
                            <image class="w-85 h-85 br50" src="/static/home/img9.png" mode=""></image>
                            <view class="tips">

                            </view>
                        </view>
                        <view class="border-b flex1 ml-18 pb-33">
                            <view class="fs-31  font-w500 flex  flex1 j-between">
                                <text>钟山淑</text>
                                <text class="fs-23 font-w400">16分钟前</text>

                            </view>
                            <view class="fs-27 flex j-between mt-8">
                                <text>向你发来10份报告</text>
                                <view class="read">已读</view>
                                <view class="noread">未读</view>

                            </view>
                        </view>
                    </view>
                    <text class="flex j-center fs-27 color4 pb-48">全部已读</text>

                </view>

            </view>
        </view>
        <popupCertificate :show="isClick"></popupCertificate>
    </view>
</template>

<script>
    import popupCertificate from '../components/certificate/certificate.vue'
    export default {
        components: {
            popupCertificate
        },
        data() {
            return {
                title: 'Hello'
                isactive: 1,
                list1: [],
                showData: false,
                isClick: false,
            }
        },
        onLoad() {

        },
        methods: {
            change() {
                console.log('1111');
            },

            onClick() {
                this.isClick = !this.isClick
                console.log('this.isClick', this.isClick);
            },
        }
    }
</script>

<style>
    .content {
<style lang="scss">
    .border-b {

        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }

    .color1 {
        color: #3D2124;
    }

    .color2 {
        color: rgba(61, 33, 36, 0.6);
    }

    .color4 {
        color: rgba(0, 0, 0, 0.4);
    }

    .bg1 {
        background-color: rgba(255, 248, 230, 1);
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .read {
        width: 77rpx;
        height: 42rpx;
        border-radius: 8rpx;
        border: 2rpx solid rgba(0, 0, 0, 0.15);
        font-weight: 400;
        font-size: 23rpx;
        color: rgba(0, 0, 0, 0.45);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
    .noread {
        width: 77rpx;
        height: 42rpx;
        background: #FFF1F0;
        border-radius: 8rpx;
        border: 2rpx solid #FFCCC7;
        font-weight: 400;
        font-size: 23rpx;
        color: #FF4D4F;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .avater {
        position: relative;

        .tips {
            position: absolute;
            top: 0;
            left: 63rpx;
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #FF3141;
        }
    }

    .top_content {

        position: relative;

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 31rpx;
            position: absolute;
            bottom: 8rpx;
            z-index: 100;
            left: 0;

            .tip {

                /* 让文字颜色透明，显示出渐变背景 */
                color: #FFEEA7;
                /* 设置文字大小 */

                font-weight: 800;
                font-size: 31rpx;



            }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
                font-weight: 400;
                font-size: 58rpx;
                color: #FFEEA7;
                line-height: 85rpx;
                text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.26);
                text-align: right;
                font-style: normal;
            }
        }
    }

    .bg-img {
        height: 648rpx;
    }

    .swiper {
        width: 688rpx;
        height: 270rpx;
        border-radius: 19rpx;

    }

    .msg {
        width: 173rpx;
        height: 58rpx;
        border-radius: 29rpx;
        background: #F6F6F6;
        font-weight: 400;
        color: #797F81;
        font-size: 27rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .tips {
            position: absolute;
            top: -12rpx;
            right: 35rpx;
            width: 27rpx;
            height: 27rpx;
            text-align: center;
            line-height: 27rpx;
            background: #FF3141;
            border: 2rpx solid #FFFFFF;
            border-radius: 50%;

            font-weight: 400;
            font-size: 17rpx;
            color: #FFFFFF;

        }
    }

    .representative {
        font-weight: 400;
        font-size: 27rpx;
        color: #797F81;
        width: 173rpx;
        height: 58rpx;
        background: #F6F6F6;
        border-radius: 29rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .tips {
            position: absolute;
            top: -12rpx;
            right: 35rpx;
            width: 27rpx;
            height: 27rpx;
            text-align: center;
            line-height: 27rpx;
            background: #FF3141;
            border: 2rpx solid #FFFFFF;
            border-radius: 50%;

            font-weight: 400;
            font-size: 17rpx;
            color: #FFFFFF;

        }
    }

    .active {
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        color: #FFFFFF;
        font-weight: 600;
    }
</style>

 static/Black@3x.png

Binary files differ

 static/aiicon/activesend.png

Binary files differ

 static/aiicon/activeupload@3x.png

Binary files differ

 static/aiicon/bg@3x.png

Binary files differ

 static/aiicon/sendmessage.png

Binary files differ

 static/aiicon/upload@3x.png

Binary files differ

 static/aiicon/vioce.png

Binary files differ

 static/aiicon/分组 12@2x.png

Binary files differ

 static/aiicon/分组 1@2x.png

Binary files differ

 static/aiicon/分组 1@2x（1）.png

Binary files differ

 static/aiicon/分组 1@3x_副本.png

Binary files differ

 static/aiicon/分组 1@3x（2）.png

Binary files differ

 static/aiicon/分组 2@2x.png

Binary files differ

 static/aiicon/分组 4@2x.png

Binary files differ

 static/aiicon/分组 4@3x.png

Binary files differ

 static/home/bg1.png

 static/home/bg2.png

 static/home/bg@2x.png

 static/home/img1.png

 static/home/img2.png

 static/home/img3.png

 static/home/img4.png

 static/home/img5.png

 static/home/img6.png

 static/home/img7.png

 static/home/img8.png

 static/home/img9.png

 static/logo.png

Binary files differ

 static/system-solid-716-spinner-three-dots-loop-scale.gif

Binary files differ