一个记账的页面刚学还有很多需要改进的

<template>
    <view>
<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">懒人算账</text></view>
            </uni-popup>
        </view>
        <view class="top">
            <view class="small_title">合计支出</view>
            <view class="sum_price">
                <view class="ren">&yen;</view>
                <view class="price">0.00</view>
            </view>
            <view class="yusuan">
                <view>本次预算 <text>0.00</text></view>
                <view>设置本次预算</view>
            </view>
        </view>
        <view class="list">
            <view class="item">
                <view class="left"><image src="../../static/logo.png"></image></view>
                <view class="center">
                    <view>饮品</view>
                    <view class="s_title">奶茶</view>
                </view>
                <view class="right">-10.00</view>
            </view>
            <view class="item">
                <view class="left"><image src="../../static/logo.png"></image></view>
                <view class="center">
                    <view>饮品</view>
                    <view class="s_title">奶茶</view>
                </view>
                <view class="right">-10.00</view>
            </view>
        </view>
        <view class="pen">
            <view>
                <image src="../../static/pen.png"></image>
            </view>
            <view>记一笔</view>
        </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        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: 50rpx;
            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;
        }
    
        /***=========top========*/
        .top {
            height: 250rpx;
            width: auto;
            margin-top: 20rpx;
            background-color: #FFC760;
            border-radius: 20rpx;
            padding: 20rpx;
        }
    
        .small_title {
            font-size: 30rpx;
        }
    
        .sum_price {
            display: flex;
            height: 130rpx;
            line-height: 130rpx;
        }
    
        .sum_price .ren {
            padding-top: 20rpx;
            margin-right: 20rpx;
        }
    
        .sum_price .price {
            font-weight: bolder;
            font-size: 100rpx;
        }
    
        .yusuan {
            display: flex;
            justify-content: space-between;
            /* 主轴上两端对齐 */
            padding-top: 20rpx;
        }
    
        .pen {
            background-color: #FFC760;
            display: flex;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 25rpx;
            width: 130rpx;
            padding: 10rpx;
            border-radius: 50rpx;
            position: fixed;
            bottom: 100rpx;
            right: 30rpx;
        }
    
        .pen image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
    
        }
        /*-------list---------*/
        .list{
            
        }
        .list .item{
            display: flex;
            height: 100rpx;
            background-color: #e7e7e7;
            margin-bottom: 20rpx;
            padding: 15rpx;
            margin-top: 20rpx;
            border-radius: 20rpx;
            
        }
        .list .item .left{
            width: 80rpx;
            line-height: 100rpx;
        }
        .list .item .s_title{
            font-size: 24rpx;
            padding-top: 8rpx;
            color: #b3b3b3;
        }
        .list .item .center{
            flex: 1;
        }
        .list .item .right{
            line-height: 100rpx;
        }
        .list image{
            width: 64rpx;
            height: 64rpx;
        }
</style>