首页页面提交

落日与鲸

2025-02-22 73050e1572f4e17778dc1e2fef97b7e4d4e702a8

 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;
   }

   .title {
      font-size: 36rpx;
      color: #8f8f94;
   .avater {
      position: relative;

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

   .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-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>