完成主页布局样式，添加余额记录页面，封装navbar组件

Liuyi

2024-09-21 a605dd0aac8d3f7e87c2e8858cce944e2a2f43fe

完成主页布局样式，添加余额记录页面，封装navbar组件

 components/navbar/navbar.vue

对比新文件
@@ -0,0 +1,45 @@
<template>
    <view class="navbar">
        <image src="../../static/images/addCard/back.png" alt="" @click="navBackToChild()"></image>
        <text>{{title}}</text>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    const emit = defineEmits(['navBackTo'])
    function navBackToChild(){
        emit('navBackTo')
    }
    const props = defineProps({
        title:{
            type:String,
            default:''
        }
    })
    const title = ref(props.title)
</script>

<style lang="scss">
   .navbar{
       width:100%;
       height:176rpx;
       background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
       display: flex;
       align-items: flex-end;
       padding-bottom:24rpx;
       box-sizing: border-box;
       image{
           width:20rpx;
           height:40rpx;
           margin-left:32rpx;
       }
       text{
           font-weight: 400;
           font-size: 36rpx;
           color: #000000;
           margin-left: 234rpx;
		   
       }
   }
</style>

 main.js

@@ -1,9 +1,11 @@
import App from './App'
import navbar from './components/navbar/navbar.vue'

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
    const app = createSSRApp(App)
    app.component('navbar', navbar)
      return {
        app
      }
}

 pages.json

@@ -11,6 +11,18 @@
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/addCard/index",
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path" : "pages/balanceRecord/index",
            "style": {
                "navigationStyle":"custom"
            }
        }
    ],
    "globalStyle": {
@@ -19,6 +31,7 @@
        // "navigationBarBackgroundColor": "#F8F8F8",
        // "backgroundColor": "#F8F8F8",
        "navigationStyle": "custom"
        // "autoscan": true
    },
    // "uniIdRouter": {},
    "easycom": {

 pages/addCard/index.vue

对比新文件
@@ -0,0 +1,181 @@
<template>
    <view class="container">
        <view class="content">
            <navbar @navBackTo="navBackTo()" title="绑定会员卡"></navbar>
            <view class="main">
                <view class="title">请填写卡及个人信息</view>
                <view class="form">
                    <view class="form-item card-item">
                        <text>卡号：</text>
                        <input v-model="form.cardNumber" placeholder="请输入卡号"/>
                        <image src="../../static/images/addCard/code.png" alt=""></image>
                    </view>
                    <view class="form-item">
                        <text>姓名：</text>
                        <input v-model="form.cardNumber" placeholder="请输入姓名"/>
                    </view>
                    <view class="form-item">
                        <text>联系方式：</text>
                        <input v-model="form.cardNumber" placeholder="请输入手机号"/>
                    </view>
                    <view class="form-item">
                        <text>区域：</text>
                        <input v-model="form.cardNumber" placeholder="请选择区域"/>
                    </view>
                    <view class="form-item">
                        <text>地址：</text>
                        <input v-model="form.cardNumber" placeholder="请输入地址"/>
                    </view>
                    <view class="form-item">
                        <text>备注：</text>
                        <input v-model="form.cardNumber" placeholder="请输入内容"/>
                    </view>
                </view>
                <view class="tips">
                    <text>1、完成实名认证，方便遗失挂失及补卡等。</text>
                    <text>2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text>
                </view>
                <view class="subBtn" @click="submit()">提交信息</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted,ref} from 'vue';
//状态栏高度
// const statusBarHeight = ref()
//返回
function navBackTo(){
    uni.navigateBack()
}
const form = ref({
    cardNumber:'',
    name:'',
    phone:'',
    address:'',
    remark:'',
})
function submit(){
    console('res')
}
onMounted(() =>{
    // if(uni.getMenuButtonBoundingClientRect){
    //     statusBarHeight.value = uni.getMenuButtonBoundingClientRect().top * 2
    // }
})
</script>

<style lang="scss" scoped>
       .container{
           width:100%;
           height:100vh;
           .content{
               width:100%;
               height:100vh;
               .navbar{
                   width:100%;
                   height:176rpx;
                   background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
                   display: flex;
                   align-items: flex-end;
                   padding-bottom:24rpx;
                   box-sizing: border-box;
                   image{
                       width:20rpx;
                       height:40rpx;
                       margin-left:32rpx;
                   }
                   text{
                       font-weight: 400;
                       font-size: 36rpx;
                       color: #000000;
                       margin-left: 234rpx;
					   
                   }
               }
           .main{
               width:100%;
               height: calc(100vh - 176rpx);
               background:linear-gradient(to top,#FFFFFF,#E8EFFF);
               padding:0 32rpx 38rpx;
               box-sizing:border-box;
               .title{
                   width:100%;
                   height:130rpx;
                   text-align:left;
                   line-height:130rpx;
                   // background: #e6e6e6; 
               }
               .form{
                   height: 700rpx;
                   width:100%;
                   background: #FFFFFF;
                   border-radius: 24rpx;
                   .form-item{
                       height:100rpx;
                       width:96%;
                       border-bottom:1px solid rgba(226,226,226,0.6);
                       display: flex;
                       justify-content:space-between;
                       align-items: center;
                       margin: 0 auto;
                       text{
                           width:160rpx;
                           font-weight:400;
                           font-size: 32rpx;
                           color: #000000;
                           margin-left: 24rpx;
                           // margin-right: 82rpx;
                       }
                       input{
                           width: 450rpx;
                           :deep(.uni-input-placeholder ){
                               font-weight: 300;
                               font-size:32rpx;
                               color: #ccc;
                           }
                       }
                   }
                   .card-item{
                       input{
                         width:375rpx;
                         }
                         image{
                             width:44rpx;
                             height:44rpx;
                         }
                   }
               }
               .tips{
                   width: 100%;
                   padding:0 20rpx;
                   box-sizing: border-box;
                   display: flex;
                   justify-content: space-between;
                   align-items: flex-start;
                   flex-direction: column;
                   margin-top:56rpx;
                   font-weight: 300;
                   font-size: 32rpx;
                   color: #484848;
                   text:first-child{
                       margin-bottom:28rpx;
                   }
               }
               .subBtn{
                   width: 100%;
                   height: 98rpx;
                   background-color:#5EA1FA;
                   border-radius: 50rpx;
                   font-weight: 300;
                   font-size: 36rpx;
                   color: #FFFFFF;
                   text-align: center;
                   line-height:98rpx;
                   margin-top: 236rpx;
               }
           }
       }
   }
</style>

 pages/balanceRecord/index.vue

对比新文件
@@ -0,0 +1,19 @@
<template>
    <view class="container">
        <navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
    </view>
</template>

<script setup>
    //返回
    function navBackTo(){
        uni.navigateBack()
    }
</script>

<style lang="scss">
      .container{
          width: 100%;
          height: 100vh;
      } 
</style>

 pages/index/index.vue

@@ -3,13 +3,56 @@
<template>
    <view class="container">
        <view class="content">
            <view class="card-box" :style="{paddingTop:capsuleHeight + 'rpx'}">
                <view class="card"></view>
            <view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
                <view class="card">
                    <view class="card-content" @click="navToAddCard()">
                        <view v-if="isVip" class="card-title">
                            <view>会员卡</view>
                            <image src="../../static/images/index/code1.png" alt=""></image>
                        </view>
                        <view v-else class="card-add">
                            <view>
                                <image src="../../static/images/index/vip-add.png" alt=""></image>
                                <text>添加会员卡</text>
                            </view>
                        </view>
                        <view class="card-info">
                            <view class="info-head"><image src="../../static/images/index/hend1.png" alt=""></image></view>
                            <view class="info-content">
                                <view class="info-content-top">
                                    <view>张大左</view>
                                    <view>vip1</view>
                                </view>
                                <view class="info-content-bottom">YL123654987521</view>
                            </view>
                            <view class="info-more"><image src="../../static/images/index/back.png"></image></view>
                        </view>
                        <view class="card-bottom">
                            <view>我的积分：200</view>
                            <view>消费折扣：9.9折</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="function-box1">
                <view class="box1-bg"></view>
                <view class="box1-bg"></view>
                <view class="box1-bg"></view>
                <view class="box1-bg box1-one">
                    <image src="../../static/images/index/home21.png" alt=""></image>
                    <view>送水到家</view>
                </view>
                <view class="box1-bg box1-two">
                    <view>账户余额（元)</view>
                    <view class="recharge">
                        <text>￥</text>
                        <text>120.00</text>
                    </view>
                    <view>
                        充值
                    </view>
                </view>
                <view class="box1-bg box1-three">
                    <image src="../../static/images/index/icon23.png" alt=""></image>
                    <view>送水到家</view>
                </view>
            </view>
            <view class="function-box2">
                <view class="box2-title"><text>功能列表</text></view>
@@ -22,39 +65,74 @@
                    </block>
                </view>
            </view>
            <view class="advertisement-box"><image src="../../static/images/index/bg4.png" alt=""></image></view>
            <view class="service-box">
                <view class="service-title"><text>服务指南</text></view>
                <view class="service-content">
                    <view class="service-bg">
                        <view>
                            <image src="../../static/images/index/icon51.png" alt=""></image>
                            <text>附近站点</text>
                        </view>
                        <view class="service-info">蔡家供水服务中心正在营业中……</view>
                        <view>
                            <text>查看更多</text>
                            <image src="../../static/images/index/more-info5.png" alt=""></image>
                        </view>
                    </view>
                    <view class="service-bg">
                            <view>
                                <image src="../../static/images/index/notice5.png" alt=""></image>
                                <text>公示公告</text>
                            </view>
                            <view class="service-info">停水公告的部分摘要的内容展示……</view>
                            <view>
                                <text>查看更多</text>
                                <image src="../../static/images/index/more-info5.png" alt=""></image>
                            </view>
                    </view>
                </view>
            </view>
        </view>
        <button @click="back()"></button>
    </view>
</template>

<script setup>
    import { onMounted, ref } from "vue"
    const back = () =>{
        // uni.navigateBack()
    //胶囊高度
    const topHeight = ref(0)
    /**
     * 会员卡相关
     */
    const isVip = ref(false)
    function navToAddCard(){
        uni.navigateTo({
            url:"/pages/login/index"
            url:'/pages/addCard/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'},
        {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/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'},
    ])
    function navTo(itemUrl){
        uni.navigateTo({
            url:itemUrl
        })
    }
    onMounted(() =>{
        if(uni.getMenuButtonBoundingClientRect){
            topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
        }
    })
    
</script>

@@ -82,18 +160,149 @@
            background-image: url("../../static/images/index/card1.png");
            background-repeat: no-repeat;
            background-size: 100%;
			
            .card-content{
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                // background: #AFD5FF;
                padding: 14rpx 42rpx 64rpx 22rpx;
                .card-title{
                    width:100%;
                    height:64rpx;
                    display: flex;
                    justify-content: flex-end;
                    // background: #82fec5;
                    align-items: center;
                    view{
                        font-weight:300;
                        font-size: 36rpx;
                        color: #FFFFFF;
                        letter-spacing:5rpx;
                        text-align: left;
                    }
                    image{
                        width:64rpx;
                        height:64rpx;
                    }
                }
                .card-add{
                    width:100%;
                    height:64rpx;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    view{
                        width: 172rpx;
                        height:38rpx;
                        border-radius:24rpx;
                        background: #fff;
                        display: flex;
                        justify-content:flex-start;
                        align-items:center;
                        image{
                            width:22rpx;
                            height:22rpx;
                            margin-left:15rpx;
                        }
                        text{
                            font-weight: 300;
                            font-size: 20rpx;
                            color: #0088FF;
                            margin-left:15rpx;
                        }
                    }
                }
                .card-info{
                    width: 100%;
                    height:100rpx;
                    // background: #8ff6c3;
                    margin-top: 18rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .info-head{
                        width: 100rpx;
                        height:100rpx;
                        margin-right: 20rpx;
                        image{
                            width: 100rpx;
                            height:100rpx;
                        }
                    }
                    .info-content{
                        width: 216rpx;//108+86+22
                        height:100rpx;
                        // background: #54dac4;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .info-content-top{
                            width: 100%;
                            display: flex;
                            justify-content:space-between;
                            align-items:center;
                            margin-bottom:8rpx;
                            view:first-child{
                                width: 108rpx;
                                height: 50rpx;
                                font-weight: 400;
                                font-size: 36rpx;
                                color: #FFFFFF;
                                text-align: left;
                            }
                            view:last-child{
                                width: 86rpx;
                                height: 32rpx;
                                font-weight:300;
                                font-size: 26rpx;
                                color: #FFFFFF;
                                text-align: center;
                                background-image: url('../../static/images/index/vip1.png');
                            }
                        }
                        .info-content-bottom{
                            width: 100%;
                            font-weight: 300;
                            font-size: 20rpx;
                            color: #FFFFFF;
                            letter-spacing:5rpx;
                            text-align: left;
                        }
                    }
                    .info-more{
                        width: 12rpx;
                        height: 28rpx;
                        margin-left:274rpx;
                        image{
                            width: 12rpx;
                            height: 28rpx;
                        }
                    }
                }
                .card-bottom{
                    margin-top:36rpx;
                    width:100%;
                    display: flex;
                    justify-content:space-evenly;
                    font-weight: 300;
                    font-size: 20rpx;
                    color: #D8D8D8;
                    line-height: 0rpx;
                    text-align: center;
                }
            }
        }
    }
    .function-box1{
        width:100%;
        box-sizing:border-box;
        height: 264rpx;
        padding: 32rpx;
        height: 227rpx;
        padding: 20rpx 32rpx 15rpx;
        // background: rgba(85, 170, 0, 0.1);
        display: flex;
        display:flex;
        justify-content: space-between;
        align-items: center;
        align-items:center;
        .box1-bg{
            width:212rpx;
            height:200rpx;
@@ -101,12 +310,83 @@
            background: #fff;
            box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
        }
        .box1-one{
            font-weight: 300;
            font-size: 32rpx;
            color: #000000;
            text-align: center;
            display: flex;
            flex-direction:column;
            align-items: center;
            justify-content: center;
            image{
                width: 86rpx;
                height: 78rpx;
                margin-bottom:20rpx;
            }
        }
        .box1-two{
            box-sizing: border-box;
            padding:25rpx 0 10rpx;
            display: flex;
            flex-direction:column;
            align-items:center;
            justify-content:space-around;
            view:first-child{
                font-weight: 300;
                font-size: 24rpx;
                color: #464646;
                text-align: center;
                margin-bottom:10rpx;
            }
            .recharge{
                text:first-child{
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #000;
                }
                text:last-child{
                    font-weight: 300;
                    font-size: 32rpx;
                    color: #2269E5;
                }
            }
            view:last-child{
                width: 140rpx;
                height: 80rpx;
                font-weight:300;
                font-size: 24rpx;
                color: #000141;
                background-image: url('../../static/images/index/icon22.png');
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                text-align:center;
                line-height:80rpx;
                margin-top:10rpx;
            }
        }
        .box1-three{
            font-weight: 300;
            font-size: 32rpx;
            color: #000000;
            text-align: center;
            display: flex;
            flex-direction:column;
            align-items: center;
            justify-content: center;
            image{
                width: 83rpx;
                height:83rpx;
                margin-bottom:20rpx;
            }
        }
    }
    .function-box2{
        width:100%;
        box-sizing:border-box;
        height: 460rpx;//374 + 44 + 距离 + 底部padding32
        padding:0 32rpx 32rpx;
        height: 443rpx;//374 + 44 + 距离 + 底部padding32
        padding:0 32rpx 15rpx;
        // background: rgba(46, 121, 170, 0.5);
        .box2-title{
            width: 100%;
@@ -119,7 +399,7 @@
        }
        .box2-content{
            box-sizing: border-box;
            padding:30rpx 50rpx;
            padding:22rpx 35rpx;
            width: 686rpx;
            height:374rpx;
            background: #fff;
@@ -130,12 +410,15 @@
            justify-content: space-between;
            align-items: center;
            .box2-item{
                width: 120rpx;
                height:130rpx;
                width: 146rpx;
                height:143rpx;
                display: flex;
                flex-direction:column;
                justify-content:space-between;
                align-items: center;
                image{
                    width: 90rpx;
                    height:90rpx;
                    margin: 0 auto;
                }
                .box2-item-text{
                    width:100%;
@@ -148,8 +431,85 @@
            }
        }
    }
    button{
        width:100rpx;
        height:50rpx
    .advertisement-box{
        width:100%;
        height: 188rpx;
        padding:0 32rpx 10rpx; 
        box-sizing: border-box;
        image{
            width:100%;
            height: 178rpx;
        }
    }
    .service-box{
        width: 100%;
        height: 255rpx;
        // background: #D2F2FE;
        padding:0 32rpx;
        box-sizing: border-box;
        .service-title{
            height: 44rpx;
            font-weight: 300;
            font-size: 32rpx;
            color: #000000;
            text-align: left;
            margin-bottom: 5rpx;
            margin-left: 30rpx;
        }
        .service-content{
            width: 100%;
            height: 206rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .service-bg{
                width: 330rpx;
                height: 206rpx;
                background: linear-gradient(to bottom,#AFD5FF,#FFFFFF);
                border-radius: 24rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items:flex-start;
                    view:first-child{
                        display: flex;
                        align-items: center;
                        margin-left:40rpx;
                        image{
                            width:48rpx;
                            height:48rpx;
                            margin-right:10rpx;
                        }
                        text{
                            font-weight: 300;
                            font-size: 28rpx;
                            color: #000000;
                        }
                    }
                    .service-info{
                        width: 214rpx;
                        font-weight: 300;
                        font-size: 24rpx;
                        color: #4D4B4B;
                        margin-left:96rpx;
                    }
                    view:last-child{
                        margin-left: 174rpx;
                        margin-top: 18rpx;
                        display: flex;
                        align-items: center;
                        image{
                            width:32rpx;
                            height:32rpx;
                        }
                        text{
                            font-weight: 300;
                            font-size: 24rpx;
                            color: #4D4B4B;
                            margin-right: 10rpx;
                        }
                    }
            }
        }
    }
</style>

 pages/login/index.vue

@@ -38,7 +38,7 @@
                    <view class="line"></view>
                </view>
                <view class="other-login">
                    <img src="../../static/images/login/wechat.png" alt="" @click="wxLoginPopup()"/>
                    <image src="../../static/images/login/wechat.png" alt="" @click="wxLoginPopup()"></image>
                </view>
            </view>
        </view>
@@ -189,7 +189,7 @@
                    display: flex;
                    justify-content:center;
                    align-items: center;
                    img{
                    image{
                        width:76rpx;
                        height:76rpx;
                        /* background: #345DB1; */
@@ -197,7 +197,6 @@
                }
            }
         }
		 
         .popup-content {
             height: 560rpx;
             position: relative;

 static/images/addCard/back.png

 static/images/addCard/code.png

 static/images/index/vip-add.png

 unpackage/dist/dev/mp-weixin/app.js

@@ -4,6 +4,8 @@
if (!Math) {
  "./pages/index/index.js";
  "./pages/login/index.js";
  "./pages/addCard/index.js";
  "./pages/balanceRecord/index.js";
}
const _sfc_main = {
  __name: "App",
@@ -21,8 +23,10 @@
    };
  }
};
const navbar = () => "./components/navbar/navbar.js";
function createApp() {
  const app = common_vendor.createSSRApp(_sfc_main);
  app.component("navbar", navbar);
  return {
    app
  };

 unpackage/dist/dev/mp-weixin/app.json

@@ -1,10 +1,14 @@
{
  "pages": [
    "pages/index/index",
    "pages/login/index"
    "pages/login/index",
    "pages/addCard/index",
    "pages/balanceRecord/index"
  ],
  "window": {
    "navigationStyle": "custom"
  },
  "usingComponents": {}
  "usingComponents": {
    "navbar": "/components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/common/assets.js

@@ -1,5 +1,29 @@
"use strict";
const _imports_0 = "/static/images/login/wechat.png";
const _imports_0$3 = "/static/images/index/code1.png";
const _imports_1$1 = "/static/images/index/vip-add.png";
const _imports_2 = "/static/images/index/hend1.png";
const _imports_3 = "/static/images/index/back.png";
const _imports_4 = "/static/images/index/home21.png";
const _imports_5 = "/static/images/index/icon23.png";
const _imports_6 = "/static/images/index/bg4.png";
const _imports_7 = "/static/images/index/icon51.png";
const _imports_8 = "/static/images/index/more-info5.png";
const _imports_9 = "/static/images/index/notice5.png";
const _imports_0$2 = "/static/images/login/wechat.png";
const _imports_1 = "/static/images/login/logo.png";
const _imports_0$1 = "/static/images/addCard/code.png";
const _imports_0 = "/static/images/addCard/back.png";
exports._imports_0 = _imports_0;
exports._imports_1 = _imports_1;
exports._imports_0$1 = _imports_0$3;
exports._imports_0$2 = _imports_0$2;
exports._imports_0$3 = _imports_0$1;
exports._imports_1 = _imports_1$1;
exports._imports_1$1 = _imports_1;
exports._imports_2 = _imports_2;
exports._imports_3 = _imports_3;
exports._imports_4 = _imports_4;
exports._imports_5 = _imports_5;
exports._imports_6 = _imports_6;
exports._imports_7 = _imports_7;
exports._imports_8 = _imports_8;
exports._imports_9 = _imports_9;

 unpackage/dist/dev/mp-weixin/components/navbar/navbar.js

对比新文件
@@ -0,0 +1,29 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
const _sfc_main = {
  __name: "navbar",
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  emits: ["navBackTo"],
  setup(__props, { emit: __emit }) {
    const emit = __emit;
    function navBackToChild() {
      emit("navBackTo");
    }
    const props = __props;
    const title = common_vendor.ref(props.title);
    return (_ctx, _cache) => {
      return {
        a: common_assets._imports_0,
        b: common_vendor.o(($event) => navBackToChild()),
        c: common_vendor.t(title.value)
      };
    };
  }
};
wx.createComponent(_sfc_main);

 unpackage/dist/dev/mp-weixin/components/navbar/navbar.json

对比新文件
@@ -0,0 +1,4 @@
{
  "component": true,
  "usingComponents": {}
}

 unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxml

对比新文件
@@ -0,0 +1 @@
<view class="navbar"><image src="{{a}}" alt="" bindtap="{{b}}"></image><text>{{c}}</text></view>

 unpackage/dist/dev/mp-weixin/components/navbar/navbar.wxss

对比新文件
@@ -0,0 +1,45 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.navbar {
  width: 100%;
  height: 176rpx;
  background: linear-gradient(to bottom, #5EA1FA, #8BC1FC);
  display: flex;
  align-items: flex-end;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}
.navbar image {
  width: 20rpx;
  height: 40rpx;
  margin-left: 32rpx;
}
.navbar text {
  font-weight: 400;
  font-size: 36rpx;
  color: #000000;
  margin-left: 234rpx;
}

 unpackage/dist/dev/mp-weixin/pages/addCard/index.js

对比新文件
@@ -0,0 +1,55 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
}
const _easycom_navbar = () => "../../components/navbar/navbar.js";
if (!Math) {
  _easycom_navbar();
}
const _sfc_main = {
  __name: "index",
  setup(__props) {
    function navBackTo() {
      common_vendor.index.navigateBack();
    }
    const form = common_vendor.ref({
      cardNumber: "",
      name: "",
      phone: "",
      address: "",
      remark: ""
    });
    function submit() {
      console("res");
    }
    common_vendor.onMounted(() => {
    });
    return (_ctx, _cache) => {
      return {
        a: common_vendor.o(($event) => navBackTo()),
        b: common_vendor.p({
          title: "绑定会员卡"
        }),
        c: form.value.cardNumber,
        d: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        e: common_assets._imports_0$3,
        f: form.value.cardNumber,
        g: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        h: form.value.cardNumber,
        i: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        j: form.value.cardNumber,
        k: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        l: form.value.cardNumber,
        m: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        n: form.value.cardNumber,
        o: common_vendor.o(($event) => form.value.cardNumber = $event.detail.value),
        p: common_vendor.o(($event) => submit())
      };
    };
  }
};
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-4c5e7c86"]]);
wx.createPage(MiniProgramPage);

 unpackage/dist/dev/mp-weixin/pages/addCard/index.json

对比新文件
@@ -0,0 +1,6 @@
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/pages/addCard/index.wxml

对比新文件
@@ -0,0 +1 @@
<view class="container data-v-4c5e7c86"><view class="content data-v-4c5e7c86"><navbar wx:if="{{b}}" class="data-v-4c5e7c86" bindnavBackTo="{{a}}" u-i="4c5e7c86-0" bind:__l="__l" u-p="{{b}}"></navbar><view class="main data-v-4c5e7c86"><view class="title data-v-4c5e7c86">请填写卡及个人信息</view><view class="form data-v-4c5e7c86"><view class="form-item card-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">卡号：</text><input class="data-v-4c5e7c86" placeholder="请输入卡号" value="{{c}}" bindinput="{{d}}"/><image class="data-v-4c5e7c86" src="{{e}}" alt=""></image></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">姓名：</text><input class="data-v-4c5e7c86" placeholder="请输入姓名" value="{{f}}" bindinput="{{g}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">联系方式：</text><input class="data-v-4c5e7c86" placeholder="请输入手机号" value="{{h}}" bindinput="{{i}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">区域：</text><input class="data-v-4c5e7c86" placeholder="请选择区域" value="{{j}}" bindinput="{{k}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">地址：</text><input class="data-v-4c5e7c86" placeholder="请输入地址" value="{{l}}" bindinput="{{m}}"/></view><view class="form-item data-v-4c5e7c86"><text class="data-v-4c5e7c86">备注：</text><input class="data-v-4c5e7c86" placeholder="请输入内容" value="{{n}}" bindinput="{{o}}"/></view></view><view class="tips data-v-4c5e7c86"><text class="data-v-4c5e7c86">1、完成实名认证，方便遗失挂失及补卡等。</text><text class="data-v-4c5e7c86">2、绑卡后，运营商可以看到您实名时填写的 姓名和电话。</text></view><view class="subBtn data-v-4c5e7c86" bindtap="{{p}}">提交信息</view></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/addCard/index.wxss

对比新文件
@@ -0,0 +1,131 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container.data-v-4c5e7c86 {
  width: 100%;
  height: 100vh;
}
.container .content.data-v-4c5e7c86 {
  width: 100%;
  height: 100vh;
}
.container .content .navbar.data-v-4c5e7c86 {
  width: 100%;
  height: 176rpx;
  background: linear-gradient(to bottom, #5EA1FA, #8BC1FC);
  display: flex;
  align-items: flex-end;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}
.container .content .navbar image.data-v-4c5e7c86 {
  width: 20rpx;
  height: 40rpx;
  margin-left: 32rpx;
}
.container .content .navbar text.data-v-4c5e7c86 {
  font-weight: 400;
  font-size: 36rpx;
  color: #000000;
  margin-left: 234rpx;
}
.container .content .main.data-v-4c5e7c86 {
  width: 100%;
  height: calc(100vh - 176rpx);
  background: linear-gradient(to top, #FFFFFF, #E8EFFF);
  padding: 0 32rpx 38rpx;
  box-sizing: border-box;
}
.container .content .main .title.data-v-4c5e7c86 {
  width: 100%;
  height: 130rpx;
  text-align: left;
  line-height: 130rpx;
}
.container .content .main .form.data-v-4c5e7c86 {
  height: 700rpx;
  width: 100%;
  background: #FFFFFF;
  border-radius: 24rpx;
}
.container .content .main .form .form-item.data-v-4c5e7c86 {
  height: 100rpx;
  width: 96%;
  border-bottom: 1px solid rgba(226, 226, 226, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.container .content .main .form .form-item text.data-v-4c5e7c86 {
  width: 160rpx;
  font-weight: 400;
  font-size: 32rpx;
  color: #000000;
  margin-left: 24rpx;
}
.container .content .main .form .form-item input.data-v-4c5e7c86 {
  width: 450rpx;
}
.container .content .main .form .form-item input.data-v-4c5e7c86 .uni-input-placeholder {
  font-weight: 300;
  font-size: 32rpx;
  color: #ccc;
}
.container .content .main .form .card-item input.data-v-4c5e7c86 {
  width: 375rpx;
}
.container .content .main .form .card-item image.data-v-4c5e7c86 {
  width: 44rpx;
  height: 44rpx;
}
.container .content .main .tips.data-v-4c5e7c86 {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 56rpx;
  font-weight: 300;
  font-size: 32rpx;
  color: #484848;
}
.container .content .main .tips text.data-v-4c5e7c86:first-child {
  margin-bottom: 28rpx;
}
.container .content .main .subBtn.data-v-4c5e7c86 {
  width: 100%;
  height: 98rpx;
  background-color: #5EA1FA;
  border-radius: 50rpx;
  font-weight: 300;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: center;
  line-height: 98rpx;
  margin-top: 236rpx;
}

 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.js

对比新文件
@@ -0,0 +1,27 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
if (!Array) {
  const _easycom_navbar2 = common_vendor.resolveComponent("navbar");
  _easycom_navbar2();
}
const _easycom_navbar = () => "../../components/navbar/navbar.js";
if (!Math) {
  _easycom_navbar();
}
const _sfc_main = {
  __name: "index",
  setup(__props) {
    function navBackTo() {
      common_vendor.index.navigateBack();
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.o(($event) => navBackTo()),
        b: common_vendor.p({
          title: "余额记录"
        })
      };
    };
  }
};
wx.createPage(_sfc_main);

 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.json

对比新文件
@@ -0,0 +1,6 @@
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navbar": "../../components/navbar/navbar"
  }
}

 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxml

对比新文件
@@ -0,0 +1 @@
<view class="container"><navbar wx:if="{{b}}" bindnavBackTo="{{a}}" u-i="434b3e96-0" bind:__l="__l" u-p="{{b}}"></navbar></view>

 unpackage/dist/dev/mp-weixin/pages/balanceRecord/index.wxss

对比新文件
@@ -0,0 +1,29 @@
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
.container {
  width: 100%;
  height: 100vh;
}

 unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -1,42 +1,64 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const common_assets = require("../../common/assets.js");
const _sfc_main = {
  __name: "index",
  setup(__props) {
    const back = () => {
    const topHeight = common_vendor.ref(0);
    const isVip = common_vendor.ref(false);
    function navToAddCard() {
      common_vendor.index.navigateTo({
        url: "/pages/login/index"
        url: "/pages/addCard/index"
      });
    };
    const capsuleHeight = common_vendor.ref(0);
    }
    const functionList = common_vendor.ref([
      { text: "余额记录", icon: "../../static/images/index/icon31.png", url: "/pages/balanceRecord/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" }
    ]);
    function navTo(itemUrl) {
      common_vendor.index.navigateTo({
        url: itemUrl
      });
    }
    common_vendor.onMounted(() => {
      if (common_vendor.index.getMenuButtonBoundingClientRect) {
        capsuleHeight.value = (common_vendor.index.getMenuButtonBoundingClientRect().top + common_vendor.index.getMenuButtonBoundingClientRect().height) * 2;
        topHeight.value = (common_vendor.index.getMenuButtonBoundingClientRect().top + common_vendor.index.getMenuButtonBoundingClientRect().height) * 2;
      }
    });
    const functionList = common_vendor.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" }
    ]);
    return (_ctx, _cache) => {
      return {
        a: capsuleHeight.value + "rpx",
        b: common_vendor.f(functionList.value, (item, index, i0) => {
      return common_vendor.e({
        a: isVip.value
      }, isVip.value ? {
        b: common_assets._imports_0$1
      } : {
        c: common_assets._imports_1
      }, {
        d: common_assets._imports_2,
        e: common_assets._imports_3,
        f: common_vendor.o(($event) => navToAddCard()),
        g: topHeight.value + "rpx",
        h: common_assets._imports_4,
        i: common_assets._imports_5,
        j: common_vendor.f(functionList.value, (item, index, i0) => {
          return {
            a: item.icon,
            b: common_vendor.t(item.text),
            c: common_vendor.o(($event) => _ctx.navTo(item.url), index),
            c: common_vendor.o(($event) => navTo(item.url), index),
            d: index
          };
        }),
        c: common_vendor.o(($event) => back())
      };
        k: common_assets._imports_6,
        l: common_assets._imports_7,
        m: common_assets._imports_8,
        n: common_assets._imports_9,
        o: common_assets._imports_8
      });
    };
  }
};

 unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + a}}"><view class="card data-v-1cf27b2a"></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg data-v-1cf27b2a"></view><view class="box1-bg data-v-1cf27b2a"></view><view class="box1-bg data-v-1cf27b2a"></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{b}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view></view><button class="data-v-1cf27b2a" bindtap="{{c}}"></button></view>
<view class="container data-v-1cf27b2a"><view class="content data-v-1cf27b2a"><view class="card-box data-v-1cf27b2a" style="{{'padding-top:' + g}}"><view class="card data-v-1cf27b2a"><view class="card-content data-v-1cf27b2a" bindtap="{{f}}"><view wx:if="{{a}}" class="card-title data-v-1cf27b2a"><view class="data-v-1cf27b2a">会员卡</view><image class="data-v-1cf27b2a" src="{{b}}" alt=""></image></view><view wx:else class="card-add data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{c}}" alt=""></image><text class="data-v-1cf27b2a">添加会员卡</text></view></view><view class="card-info data-v-1cf27b2a"><view class="info-head data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{d}}" alt=""></image></view><view class="info-content data-v-1cf27b2a"><view class="info-content-top data-v-1cf27b2a"><view class="data-v-1cf27b2a">张大左</view><view class="data-v-1cf27b2a">vip1</view></view><view class="info-content-bottom data-v-1cf27b2a">YL123654987521</view></view><view class="info-more data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}"></image></view></view><view class="card-bottom data-v-1cf27b2a"><view class="data-v-1cf27b2a">我的积分：200</view><view class="data-v-1cf27b2a">消费折扣：9.9折</view></view></view></view></view><view class="function-box1 data-v-1cf27b2a"><view class="box1-bg box1-one data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{h}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view><view class="box1-bg box1-two data-v-1cf27b2a"><view class="data-v-1cf27b2a">账户余额（元)</view><view class="recharge data-v-1cf27b2a"><text class="data-v-1cf27b2a">￥</text><text class="data-v-1cf27b2a">120.00</text></view><view class="data-v-1cf27b2a"> 充值 </view></view><view class="box1-bg box1-three data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{i}}" alt=""></image><view class="data-v-1cf27b2a">送水到家</view></view></view><view class="function-box2 data-v-1cf27b2a"><view class="box2-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">功能列表</text></view><view class="box2-content data-v-1cf27b2a"><block wx:for="{{j}}" wx:for-item="item" wx:key="d"><view class="box2-item data-v-1cf27b2a" bindtap="{{item.c}}"><image class="data-v-1cf27b2a" src="{{item.a}}" alt=""></image><view class="box2-item-text data-v-1cf27b2a">{{item.b}}</view></view></block></view></view><view class="advertisement-box data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{k}}" alt=""></image></view><view class="service-box data-v-1cf27b2a"><view class="service-title data-v-1cf27b2a"><text class="data-v-1cf27b2a">服务指南</text></view><view class="service-content data-v-1cf27b2a"><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{l}}" alt=""></image><text class="data-v-1cf27b2a">附近站点</text></view><view class="service-info data-v-1cf27b2a">蔡家供水服务中心正在营业中……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{m}}" alt=""></image></view></view><view class="service-bg data-v-1cf27b2a"><view class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{n}}" alt=""></image><text class="data-v-1cf27b2a">公示公告</text></view><view class="service-info data-v-1cf27b2a">停水公告的部分摘要的内容展示……</view><view class="data-v-1cf27b2a"><text class="data-v-1cf27b2a">查看更多</text><image class="data-v-1cf27b2a" src="{{o}}" alt=""></image></view></view></view></view></view></view>

 unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -47,11 +47,139 @@
  background-repeat: no-repeat;
  background-size: 100%;
}
.card-box .card .card-content.data-v-1cf27b2a {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14rpx 42rpx 64rpx 22rpx;
}
.card-box .card .card-content .card-title.data-v-1cf27b2a {
  width: 100%;
  height: 64rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card-box .card .card-content .card-title view.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 36rpx;
  color: #FFFFFF;
  letter-spacing: 5rpx;
  text-align: left;
}
.card-box .card .card-content .card-title image.data-v-1cf27b2a {
  width: 64rpx;
  height: 64rpx;
}
.card-box .card .card-content .card-add.data-v-1cf27b2a {
  width: 100%;
  height: 64rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card-box .card .card-content .card-add view.data-v-1cf27b2a {
  width: 172rpx;
  height: 38rpx;
  border-radius: 24rpx;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-box .card .card-content .card-add view image.data-v-1cf27b2a {
  width: 22rpx;
  height: 22rpx;
  margin-left: 15rpx;
}
.card-box .card .card-content .card-add view text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 20rpx;
  color: #0088FF;
  margin-left: 15rpx;
}
.card-box .card .card-content .card-info.data-v-1cf27b2a {
  width: 100%;
  height: 100rpx;
  margin-top: 18rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.card-box .card .card-content .card-info .info-head.data-v-1cf27b2a {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}
.card-box .card .card-content .card-info .info-head image.data-v-1cf27b2a {
  width: 100rpx;
  height: 100rpx;
}
.card-box .card .card-content .card-info .info-content.data-v-1cf27b2a {
  width: 216rpx;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.card-box .card .card-content .card-info .info-content .info-content-top.data-v-1cf27b2a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:first-child {
  width: 108rpx;
  height: 50rpx;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  text-align: left;
}
.card-box .card .card-content .card-info .info-content .info-content-top view.data-v-1cf27b2a:last-child {
  width: 86rpx;
  height: 32rpx;
  font-weight: 300;
  font-size: 26rpx;
  color: #FFFFFF;
  text-align: center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAQCAYAAACP4IauAAAAAXNSR0IArs4c6QAAAdxJREFUSEvNlr1LHFEUxe85d3ZnEvGjt5RowgpbaJvKNGIVsisEQsAmJllm/UC0SJ3WTaNs0oh/RNKIzbo2SaMkLIhY2llIEg3ix8i8mdFRRMzoDk4zb97c995vzpz37oVcul79mO7xPH0L0SFCO0F9SFAAFVAlapNhH1SiNk0Mxdz9MSY+3nce678n/bhwziB2H9BtUr+KxeqMk9+I4yF66Pv8JtOdb/sonk6QapnJLgFeBRvBBIveDvYCOHkEZiqb9r8PX9B/6HMa2MFvrt3WnlkC9On5F98M1iwQqnynsNHfBOtZJ/usjEcHBna4PlaF6Kiv3P/CNk3Z0ErGKsLqpPP4HV7USzkVax2imgS22cqGvj4WYR6FmlsBOB75814qG2zWTyjWyg0BniSFTUdZs38aKNbcvwK2JIVNxbOBsnu+DX4DbE0Km5ayoP5BccX9KcLepLBpKUvoLxRq5VkAE0lh01JWoBU8Xy33WidYI5IdXWkoS+ixl2U+SAqrY3Pw9P29PWep85PZntKt023zlWU9Y8fSrakPNl27fefBHIERQHnTQqZpnqWeAFywHafk1wVnhUy8DHv5fSZHz3oNcIBkF6Ad15WId6osdZfQLQDLlucsTrXmGnG2Ux7nYTiYHiPjAAAAAElFTkSuQmCC");
}
.card-box .card .card-content .card-info .info-content .info-content-bottom.data-v-1cf27b2a {
  width: 100%;
  font-weight: 300;
  font-size: 20rpx;
  color: #FFFFFF;
  letter-spacing: 5rpx;
  text-align: left;
}
.card-box .card .card-content .card-info .info-more.data-v-1cf27b2a {
  width: 12rpx;
  height: 28rpx;
  margin-left: 274rpx;
}
.card-box .card .card-content .card-info .info-more image.data-v-1cf27b2a {
  width: 12rpx;
  height: 28rpx;
}
.card-box .card .card-content .card-bottom.data-v-1cf27b2a {
  margin-top: 36rpx;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  font-weight: 300;
  font-size: 20rpx;
  color: #D8D8D8;
  line-height: 0rpx;
  text-align: center;
}
.function-box1.data-v-1cf27b2a {
  width: 100%;
  box-sizing: border-box;
  height: 264rpx;
  padding: 32rpx;
  height: 227rpx;
  padding: 20rpx 32rpx 15rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -63,11 +191,80 @@
  background: #fff;
  box-shadow: 0 0 12rpx 2rpx rgba(13, 118, 255, 0.16);
}
.function-box1 .box1-one.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.function-box1 .box1-one image.data-v-1cf27b2a {
  width: 86rpx;
  height: 78rpx;
  margin-bottom: 20rpx;
}
.function-box1 .box1-two.data-v-1cf27b2a {
  box-sizing: border-box;
  padding: 25rpx 0 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.function-box1 .box1-two view.data-v-1cf27b2a:first-child {
  font-weight: 300;
  font-size: 24rpx;
  color: #464646;
  text-align: center;
  margin-bottom: 10rpx;
}
.function-box1 .box1-two .recharge text.data-v-1cf27b2a:first-child {
  font-weight: 500;
  font-size: 32rpx;
  color: #000;
}
.function-box1 .box1-two .recharge text.data-v-1cf27b2a:last-child {
  font-weight: 300;
  font-size: 32rpx;
  color: #2269E5;
}
.function-box1 .box1-two view.data-v-1cf27b2a:last-child {
  width: 140rpx;
  height: 80rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #000141;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  line-height: 80rpx;
  margin-top: 10rpx;
}
.function-box1 .box1-three.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.function-box1 .box1-three image.data-v-1cf27b2a {
  width: 83rpx;
  height: 83rpx;
  margin-bottom: 20rpx;
}
.function-box2.data-v-1cf27b2a {
  width: 100%;
  box-sizing: border-box;
  height: 460rpx;
  padding: 0 32rpx 32rpx;
  height: 443rpx;
  padding: 0 32rpx 15rpx;
}
.function-box2 .box2-title.data-v-1cf27b2a {
  width: 100%;
@@ -80,7 +277,7 @@
}
.function-box2 .box2-content.data-v-1cf27b2a {
  box-sizing: border-box;
  padding: 30rpx 50rpx;
  padding: 22rpx 35rpx;
  width: 686rpx;
  height: 374rpx;
  background: #fff;
@@ -92,13 +289,16 @@
  align-items: center;
}
.function-box2 .box2-content .box2-item.data-v-1cf27b2a {
  width: 120rpx;
  height: 130rpx;
  width: 146rpx;
  height: 143rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.function-box2 .box2-content .box2-item image.data-v-1cf27b2a {
  width: 90rpx;
  height: 90rpx;
  margin: 0 auto;
}
.function-box2 .box2-content .box2-item .box2-item-text.data-v-1cf27b2a {
  width: 100%;
@@ -108,7 +308,83 @@
  color: #000000;
  text-align: center;
}
button.data-v-1cf27b2a {
  width: 100rpx;
  height: 50rpx;
.advertisement-box.data-v-1cf27b2a {
  width: 100%;
  height: 188rpx;
  padding: 0 32rpx 10rpx;
  box-sizing: border-box;
}
.advertisement-box image.data-v-1cf27b2a {
  width: 100%;
  height: 178rpx;
}
.service-box.data-v-1cf27b2a {
  width: 100%;
  height: 255rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.service-box .service-title.data-v-1cf27b2a {
  height: 44rpx;
  font-weight: 300;
  font-size: 32rpx;
  color: #000000;
  text-align: left;
  margin-bottom: 5rpx;
  margin-left: 30rpx;
}
.service-box .service-content.data-v-1cf27b2a {
  width: 100%;
  height: 206rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.service-box .service-content .service-bg.data-v-1cf27b2a {
  width: 330rpx;
  height: 206rpx;
  background: linear-gradient(to bottom, #AFD5FF, #FFFFFF);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.service-box .service-content .service-bg view.data-v-1cf27b2a:first-child {
  display: flex;
  align-items: center;
  margin-left: 40rpx;
}
.service-box .service-content .service-bg view:first-child image.data-v-1cf27b2a {
  width: 48rpx;
  height: 48rpx;
  margin-right: 10rpx;
}
.service-box .service-content .service-bg view:first-child text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 28rpx;
  color: #000000;
}
.service-box .service-content .service-bg .service-info.data-v-1cf27b2a {
  width: 214rpx;
  font-weight: 300;
  font-size: 24rpx;
  color: #4D4B4B;
  margin-left: 96rpx;
}
.service-box .service-content .service-bg view.data-v-1cf27b2a:last-child {
  margin-left: 174rpx;
  margin-top: 18rpx;
  display: flex;
  align-items: center;
}
.service-box .service-content .service-bg view:last-child image.data-v-1cf27b2a {
  width: 32rpx;
  height: 32rpx;
}
.service-box .service-content .service-bg view:last-child text.data-v-1cf27b2a {
  font-weight: 300;
  font-size: 24rpx;
  color: #4D4B4B;
  margin-right: 10rpx;
}

 unpackage/dist/dev/mp-weixin/pages/login/index.js

@@ -29,9 +29,9 @@
    return (_ctx, _cache) => {
      return {
        a: common_vendor.o(($event) => login()),
        b: common_assets._imports_0,
        b: common_assets._imports_0$2,
        c: common_vendor.o(($event) => wxLoginPopup()),
        d: common_assets._imports_1,
        d: common_assets._imports_1$1,
        e: common_vendor.o(($event) => common_vendor.unref(popupRef).close("bottom")),
        f: common_vendor.o(($event) => wxLoginFn()),
        g: common_vendor.sr(popupRef, "169f96b2-0", {

 unpackage/dist/dev/mp-weixin/pages/login/index.wxml

@@ -1 +1 @@
<view class="container"><view class="content"><view class="title"><view class="text1">欢迎登录</view><view class="text2">Welcome to login</view></view><view class="form"><view class="form-input"><input type="text" placeholder="输入账号"></input></view><view class="form-input"><input password type="text" placeholder="输入密码"></input></view></view><view class="login-btn"><button bindtap="{{a}}">登录</button></view><view class="bottom"><view class="divide"><view class="line"></view><view class="divide-text">第三方账号登录</view><view class="line"></view></view><view class="other-login"><image src="{{b}}" alt="" bindtap="{{c}}"/></view></view></view><uni-popup wx:if="{{h}}" class="r" u-s="{{['d']}}" u-r="popupRef" u-i="169f96b2-0" bind:__l="__l" u-p="{{h}}"><view class="popup-content"><text class="popup-title">微信登录</text><view class="hr"></view><view class="img-box"><image src="{{d}}" alt="" class="img"/></view><view class="info-box"><view class="info-text1">青源直饮水平台申请获取以下权限:</view><view class="hr2"></view><view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view><view class="button-box"><button class="button1" bindtap="{{e}}">取消</button><button class="button2" bindtap="{{f}}">确定</button></view></view></view></uni-popup></view>
<view class="container"><view class="content"><view class="title"><view class="text1">欢迎登录</view><view class="text2">Welcome to login</view></view><view class="form"><view class="form-input"><input type="text" placeholder="输入账号"></input></view><view class="form-input"><input password type="text" placeholder="输入密码"></input></view></view><view class="login-btn"><button bindtap="{{a}}">登录</button></view><view class="bottom"><view class="divide"><view class="line"></view><view class="divide-text">第三方账号登录</view><view class="line"></view></view><view class="other-login"><image src="{{b}}" alt="" bindtap="{{c}}"></image></view></view></view><uni-popup wx:if="{{h}}" class="r" u-s="{{['d']}}" u-r="popupRef" u-i="169f96b2-0" bind:__l="__l" u-p="{{h}}"><view class="popup-content"><text class="popup-title">微信登录</text><view class="hr"></view><view class="img-box"><image src="{{d}}" alt="" class="img"/></view><view class="info-box"><view class="info-text1">青源直饮水平台申请获取以下权限:</view><view class="hr2"></view><view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view><view class="button-box"><button class="button1" bindtap="{{e}}">取消</button><button class="button2" bindtap="{{f}}">确定</button></view></view></view></uni-popup></view>

 unpackage/dist/dev/mp-weixin/pages/login/index.wxss

@@ -153,7 +153,7 @@
  justify-content: center;
  align-items: center;
}
.container .content .bottom .other-login img {
.container .content .bottom .other-login image {
  width: 76rpx;
  height: 76rpx;
  /* background: #345DB1; */

 unpackage/dist/dev/mp-weixin/static/images/addCard/back.png

 unpackage/dist/dev/mp-weixin/static/images/addCard/code.png

 unpackage/dist/dev/mp-weixin/static/images/index/vip-add.png