添加登录页弹窗，设置小程序头部整体布局，添加主页

Liuyi

2024-09-20 ea65ef8cffb84db1d6d92df8d7a1cb93527e46ef

 pages/index/index.vue

@@ -1,52 +1,155 @@
import { onMounted } from "vue"

<template>
   <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view class="text-area">
         <text class="title">{{title}}</text>
   <view class="container">
      <view class="content">
         <view class="card-box" :style="{paddingTop:capsuleHeight + 'rpx'}">
            <view class="card"></view>
         </view>
         <view class="function-box1">
            <view class="box1-bg"></view>
            <view class="box1-bg"></view>
            <view class="box1-bg"></view>
         </view>
         <view class="function-box2">
            <view class="box2-title"><text>功能列表</text></view>
            <view class="box2-content">
               <block v-for="(item,index) in functionList" :key="index">
                  <view class="box2-item"  @click="navTo(item.url)">
                     <image :src= "item.icon" alt=""></image>
                     <view class="box2-item-text">{{item.text}}</view>
                  </view>
               </block>
            </view>
         </view>
      </view>
      <button @click="back()"></button>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            title: 'Hello'
         }
      },
      onLoad() {

      },
      methods: {

      }
<script setup>
    import { onMounted, ref } from "vue"
   const back = () =>{
      // uni.navigateBack()
      uni.navigateTo({
         url:"/pages/login/index"
      })
   }
   //胶囊高度
   const capsuleHeight = ref(0)
   onMounted(() =>{
      if(uni.getMenuButtonBoundingClientRect){
         capsuleHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
      }
   })
   /**
    * 功能列表相关
    */
   const functionList = ref([
      {text:'余额',icon:'../../static/images/index/icon31.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
      {text:'余额',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
   ])
	
</script>

<style>
   .content {
<style lang="scss" scoped>
   .container{
      width:100%;
      height:100vh;
      overflow:scroll;
      .content{
         width:100%;
         height:100vh;
         background:#F6F6F6;
         }
   }
   .card-box{
      width: 100%;
      height: auto;
      // background: #a0b5c7;
      box-sizing: border-box;
      padding: 0 32rpx;
      background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
      .card{
         width: 100%;
         height: 304rpx;
         background-image: url("../../static/images/index/card1.png");
         background-repeat: no-repeat;
         background-size: 100%;
			
      }
   }
   .function-box1{
      width:100%;
      box-sizing:border-box;
      height: 264rpx;
      padding: 32rpx;
      // background: rgba(85, 170, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      justify-content: center;
      .box1-bg{
         width:212rpx;
         height:200rpx;
         border-radius:24rpx;
         background: #fff;
         box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
      }
   }

   .logo {
      height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
   .function-box2{
      width:100%;
      box-sizing:border-box;
      height: 460rpx;//374 + 44 + 距离 + 底部padding32
      padding:0 32rpx 32rpx;
      // background: rgba(46, 121, 170, 0.5);
      .box2-title{
         width: 100%;
         font-weight:300;
         font-size: 32rpx;
         color: #000000;
         text-align: left;
         margin-bottom: 10rpx;
         margin-left: 30rpx;
      }
      .box2-content{
         box-sizing: border-box;
         padding:30rpx 50rpx;
         width: 686rpx;
         height:374rpx;
         background: #fff;
         border-radius: 24rpx;
         box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
         .box2-item{
            width: 120rpx;
            height:130rpx;
            image{
               width: 90rpx;
               height:90rpx;
               margin: 0 auto;
            }
            .box2-item-text{
               width:100%;
               height: 40rpx;
               font-weight: 300;
               font-size: 28rpx;
               color: #000000;
               text-align: center;
            }
         }
      }
   }

   .text-area {
      display: flex;
      justify-content: center;
   }

   .title {
      font-size: 36rpx;
      color: #8f8f94;
   button{
      width:100rpx;
      height:50rpx
   }
</style>