跟着老师学收获了很多一点点的去做跟着老师的步伐一次次提升每次不懂时就从网络上获得帮助

<template>
    <view>
        <view class="top">
            <view class="user"><image src="../../static/user.png"></image></view>
            <view>登录/注册</view>
        </view>
        <view class="menu">
            <view class="item">
                <view><image src="../../static/weixin.png"></image></view>
                <view style="flex:1;">邀请好友</view>
                <view><image src="../../static/jiantou.png" style="width: 32rpx; height: 32rpx;"></image></view>
            </view>
            <view class="item">
                <view><image src="../../static/aboutus.png"></image></view>
                <view style="flex:1;">关于我们</view>
                <view><image src="../../static/jiantou.png" style="width: 32rpx; height: 32rpx;"></image></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
lang="scss">
    .top{
        background-color: #FFC760;
        height: 300rpx;
        line-height: 300rpx;
        display: flex;
        color:#8a8a8a;
        font-size: 30rpx;
    }
    .top .user{
        padding-top: 50rpx;
        padding-left: 50rpx;
        padding-right: 30rpx;
    }
    .top .user image{
        width: 128rpx;
        height: 128rpx;
        
    }
    .menu{
        margin-top: 30rpx;
        height: 100rpx;
        line-height: 100rpx;
        
    }
    .menu .item{
        padding: 10rpx 50rpx;
        color:#8a8a8a;
        display: flex;
        
    }
    .menu .item image{
        width: 48rpx;
        height: 48rpx;
        padding-top: 30rpx;
        padding-right: 10rpx;
    }
    <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>