跟着老师写的还有些许不会的地方

<template>
    <view class="main">
        <view class="menu">
            <view>
                <image class="img1" src="/static/menu.png"></image>
            </view>
            <view @click="toggle('left')" ><text>在线账本</text></view>
            <view>
                <image class="img2" src="/static/down.png"></image>
            </view>
        </view>
        <view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popup" background-color="#fff">
                <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
                        class="text">popup 内容</text></view>
            </uni-popup>
        </view>
        <view class="date">                       
            <view class="left">2月1日,2024年</view>
            <view class="right">更换年月日</view>
        </view>
        <view class="ico">
            <view class="icons">
                <view class="icon"><image src="../../static/qiche.png"></image></view>
                <view class="text">用餐</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/jiudian.png"></image></view>
                <view class="text">酒店</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/qiche.png"></image></view>
                <view class="text">交通</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/riyongping.png"></image></view>
                <view class="text">日用品</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/yingping.png"></image></view>
                <view class="text">饮品</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/yongcan.png"></image></view>
                <view class="text">中餐</view>
            </view>
            <view class="icons">
                <view class="icon"><image src="../../static/yongcan.png"></image></view>
                <view class="text">西餐</view>
            </view>
        </view>
    
        <view class="money">
            <view>金额</view>
            <view class="right"><input placeholder="0.00"></view>
        </view>
        <view class="memo">
            <view>备注</view>
            <view class="right"><input placeholder="请输入内容"></view>
        </view>
        <view class="btn">
            <button> 提 交 </button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 'center',
            }
        },
        methods: {
            toggle(type) {
                this.type = type
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup.open(type)
            },
        }
    }
</script>

<style lang="scss">
@mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    @mixin height {
        /* #ifndef APP-NVUE */
        height: 100%;
        /* #endif */
        /* #ifdef APP-NVUE */
        flex: 1;
        /* #endif */
    }

    page {
        padding: 20rpx;
        box-sizing: border-box;
        /*解决超出屏幕*/
    }

    .menu {
        display: flex;
        height: 40rpx;
        font-weight: bolder;
        font-size: 28rpx;
        line-height: 50rpx;
    }

    .menu .img1 {
        width: 28rpx;
        height: 28rpx;
        margin-right: 7rpx;
        margin-top: 10rpx
    }

    .menu .img2 {
        width: 16rpx;
        height: 16rpx;
        margin-left: 10rpx;
        margin-top: 10rpx
    }

    .popup-content {
        @include flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        height: 50px;
        background-color: #fff;
    }

    .popup-height {
        @include height;
        width: 200px;
    }
    /*------*/
    .date{
        display: flex;
        justify-content: space-between;
        height: 60rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        line-height: 60rpx;
    }
    .date .left{
        font-size: 40rpx;
    }
    .date .right{
        font-size: 20rpx;
        color: #8f8f8f;    
    }
    /*----*/
    .ico{
    
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;   
        
    
    }
    .icons{
        padding: 10rpx;
        width: 105rpx;
        margin: 10rpx;
        text-align: center;
        
    }
    .icons image{
        width: 64rpx;
        height: 64rpx;
    }
    .icons .text{
        font-size: 24rpx;
        text-align: center;
        color:#9a9599;
    }
    /*----*/
    .money{
        margin-top: 20rpx;
        display: flex;
        background-color: #ececec;
        padding: 10rpx 30rpx 10rpx 30rpx;
        border-radius: 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #8f8f8f;
    }
    .money .right{
        flex: 1;
    }
    .money input{
        color:orange;
        height: 70rpx;
        text-align: right;
        font-size: 40rpx;
    }
    .memo{
        margin-top: 20rpx;
        display: flex;
        background-color: green;
        padding: 10rpx 30rpx 10rpx 30rpx;
        border-radius: 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #8f8f8f;
    }
    .memo .right{
        flex: 1;
        margin-left: 20rpx;
        margin-top:5rpx ;
    }
    .memo input{
        color:blue;
        height: 70rpx;
        font-size: 30rpx;
    
    }
    .btn{
        margin-top: 10rpx;
    }
    .btn button{ 
        background-color:red;

    }
</style>