profile.vue

footGuide.vue

footGuide.vue

footGuide似乎没什么难点，直接上代码

<template>
  <section id="foot_guide">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
      <defs>
        <symbol viewBox="0 0 40 40" id="msite"><g fill="none" fill-rule="evenodd" stroke="#666" stroke-width="2"><path d="M31.426 23.095l2.678 5.742 2.943-1.372a3.173 3.173 0 0 0 1.537-4.212l-1.339-2.871-5.819 2.713z"></path><path d="M29.074 31.161c-1.224-.49-2.404-.32-3.49.185-6.383 2.977-13.938.286-16.875-6.01-2.936-6.297-.14-13.815 6.243-16.792 5.211-2.43 11.203-1.083 14.825 2.919l-12.263 5.718c-1.596.745-2.295 2.624-1.561 4.198.734 1.574 2.625 2.246 4.22 1.503l8.422-3.928 9.953-4.641a18.78 18.78 0 0 0-.941-2.453C33.202 2.416 21.869-1.62 12.294 2.844 2.718 7.309-1.474 18.586 2.93 28.03c4.404 9.445 15.737 13.482 25.313 9.017 1.069-.499 2.067-.879 3.438-1.744 0 0-1.382-3.651-2.607-4.142z"></path></g></symbol>

        <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" id="msiteActive"><defs><linearGradient id="index.18edf5a_c" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#2BAEFF"></stop><stop offset="100%" stop-color="#0095FF"></stop></linearGradient><linearGradient id="index.18edf5a_d" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#29ADFF"></stop><stop offset="100%" stop-color="#0095FF"></stop></linearGradient><path id="index.18edf5a_a" d="M30.426 22.095l2.678 5.742 2.943-1.372a3.173 3.173 0 0 0 1.537-4.212l-1.339-2.871-5.819 2.713z"></path><mask id="index.18edf5a_e" width="9.455" height="10.456" x="-1" y="-1"><path fill="#fff" d="M29.426 18.382h9.455v10.456h-9.455z"></path><use xlink:href="#index.18edf5a_a"></use></mask><path id="index.18edf5a_b" d="M28.074 30.161c-1.224-.49-2.404-.32-3.49.185-6.383 2.977-13.938.286-16.875-6.01-2.936-6.297-.14-13.815 6.243-16.792 5.211-2.43 11.203-1.083 14.825 2.919l-12.263 5.718c-1.596.745-2.295 2.624-1.561 4.198.734 1.574 2.625 2.246 4.22 1.503l8.422-3.928 9.953-4.641a18.78 18.78 0 0 0-.941-2.453C32.202 1.416 20.869-2.62 11.294 1.844 1.718 6.309-2.474 17.586 1.93 27.03c4.404 9.445 15.737 13.482 25.313 9.017 1.069-.499 2.067-.879 3.438-1.744 0 0-1.382-3.651-2.607-4.142z"></path><mask id="index.18edf5a_f" width="38.769" height="39.241" x="-.7" y="-.7"><path fill="#fff" d="M-.521-.675h38.769v39.241H-.521z"></path><use xlink:href="#index.18edf5a_b"></use></mask></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><use fill="url(#index.18edf5a_c)" xlink:href="#index.18edf5a_a"></use><use stroke="url(#index.18edf5a_d)" stroke-width="2" mask="url(#index.18edf5a_e)" xlink:href="#index.18edf5a_a"></use></g><g transform="translate(1 1)"><use fill="url(#index.18edf5a_c)" xlink:href="#index.18edf5a_b"></use><use stroke="url(#index.18edf5a_d)" stroke-width="1.4" mask="url(#index.18edf5a_f)" xlink:href="#index.18edf5a_b"></use></g></g></symbol>

        <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" id="find"><defs><path id="discover-regular.8ef537f_a" d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"></path><mask id="discover-regular.8ef537f_b" width="40" height="40" x="0" y="0" fill="#fff"><use xlink:href="#discover-regular.8ef537f_a"></use></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#666" stroke-width="4" mask="url(#discover-regular.8ef537f_b)" xlink:href="#discover-regular.8ef537f_a"></use><path stroke="#666" stroke-width="2" d="M12.79 28.126c-1.515.68-2.169.016-1.462-1.484l3.905-8.284c.47-.999 1.665-2.198 2.66-2.675l8.484-4.064c1.497-.717 2.153-.08 1.46 1.435l-3.953 8.64c-.46 1.006-1.647 2.186-2.655 2.64l-8.44 3.792z"></path><path fill="#666" d="M15.693 24.636c-.692.276-1.02-.06-.747-.746l2.21-4.946c.225-.505.721-.602 1.122-.202l2.563 2.563c.394.394.31.893-.203 1.122l-4.945 2.209z"></path></g></symbol>

        <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" id="findActive"><defs><path id="discover-regular.8ef537f_a" d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20z"></path><mask id="discover-regular.8ef537f_b" width="40" height="40" x="0" y="0" fill="#fff"><use xlink:href="#discover-regular.8ef537f_a"></use></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#3190e8" stroke-width="4" mask="url(#discover-regular.8ef537f_b)" xlink:href="#discover-regular.8ef537f_a"></use><path stroke="#3190e8" stroke-width="2" d="M12.79 28.126c-1.515.68-2.169.016-1.462-1.484l3.905-8.284c.47-.999 1.665-2.198 2.66-2.675l8.484-4.064c1.497-.717 2.153-.08 1.46 1.435l-3.953 8.64c-.46 1.006-1.647 2.186-2.655 2.64l-8.44 3.792z"></path><path fill="#3190e8" d="M15.693 24.636c-.692.276-1.02-.06-.747-.746l2.21-4.946c.225-.505.721-.602 1.122-.202l2.563 2.563c.394.394.31.893-.203 1.122l-4.945 2.209z"></path></g></symbol>

        <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 38 38" id="order"><defs><rect id="order-regular.41c17f8_a" width="38" height="38" rx="2"></rect><mask id="order-regular.41c17f8_b" width="38" height="38" x="0" y="0" fill="#fff"><use xlink:href="#order-regular.41c17f8_a"></use></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#666" stroke-width="4" mask="url(#order-regular.41c17f8_b)" xlink:href="#order-regular.41c17f8_a"></use><rect width="24" height="2" x="7" y="8" fill="#666" rx="1"></rect><rect width="20" height="2" x="7" y="17" fill="#666" rx="1"></rect><rect width="8" height="2" x="7" y="26" fill="#666" rx="1"></rect></g></symbol>

        <symbol viewBox="0 0 38 38" id="orderActive"><defs><linearGradient id="order.070ae2a_a" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#2BAEFF"></stop><stop offset="100%" stop-color="#0095FF"></stop></linearGradient></defs><g fill="none" fill-rule="evenodd"><rect width="38" height="38" fill="url(#order.070ae2a_a)" rx="2"></rect><rect width="24" height="2" x="7" y="8" fill="#FFF" rx="1"></rect><rect width="20" height="2" x="7" y="17" fill="#FFF" rx="1"></rect><rect width="8" height="2" x="7" y="26" fill="#FFF" rx="1"></rect></g></symbol>

        <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 38 38" id="profile"><defs><path id="profile-regular.c151d62_a" d="M10 11.833V8.999A8.999 8.999 0 0 1 19 0c4.97 0 9 4.04 9 8.999v2.834l-.013.191C27.657 16.981 23.367 21 19 21c-4.616 0-8.64-4.02-8.987-8.976L10 11.833z"></path><mask id="profile-regular.c151d62_c" width="18" height="21" x="0" y="0" fill="#fff"><use xlink:href="#profile-regular.c151d62_a"></use></mask><path id="profile-regular.c151d62_b" d="M0 32.675C0 26.763 10.139 22 19.027 22 27.916 22 38 26.763 38 32.757v3.312C38 37.136 37.098 38 35.997 38H2.003C.897 38 0 37.137 0 36.037v-3.362z"></path><mask id="profile-regular.c151d62_d" width="38" height="16" x="0" y="0" fill="#fff"><use xlink:href="#profile-regular.c151d62_b"></use></mask></defs><g fill="none" fill-rule="evenodd" stroke="#666" stroke-width="4"><use mask="url(#profile-regular.c151d62_c)" xlink:href="#profile-regular.c151d62_a"></use><use mask="url(#profile-regular.c151d62_d)" xlink:href="#profile-regular.c151d62_b"></use></g></symbol>

        <symbol viewBox="0 0 38 38" id="profileActive"><defs><linearGradient id="profile.dbc5ebf_a" x1="50%" x2="50%" y1="100%" y2="0%"><stop offset="0%" stop-color="#2BAEFF"></stop><stop offset="100%" stop-color="#0095FF"></stop></linearGradient></defs><path fill="url(#profile.dbc5ebf_a)" fill-rule="evenodd" d="M10 11.833V8.999A8.999 8.999 0 0 1 19 0c4.97 0 9 4.04 9 8.999v2.834l-.013.191C27.657 16.981 23.367 21 19 21c-4.616 0-8.64-4.02-8.987-8.976L10 11.833zM0 32.675C0 26.763 10.139 22 19.027 22 27.916 22 38 26.763 38 32.757v3.312C38 37.136 37.098 38 35.997 38H2.003C.897 38 0 37.137 0 36.037v-3.362z"></path></symbol>

      </defs>
    </svg>
    <section @click="gotoAddress({path:'/msite', query:{geohash}})" class="guide_item">
      <svg class="icon_style">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('msite') !== -1? '#msiteActive' : '#msite'"/>
      </svg>
      <span>外卖</span>
    </section>
    <section @click="gotoAddress({path:`/search/${geohash}`})" class="guide_item">
      <svg class="icon_style">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('search') !== -1? '#findActive' : '#find'"/>
      </svg>
      <span>搜索</span>
    </section>
    <section @click="gotoAddress({path:'/order'})" class="guide_item">
      <svg class="icon_style">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('order') !== -1? '#orderActive' : '#order'"/>
      </svg>
      <span>订单</span>
    </section>
    <section @click="gotoAddress({path:'/profile'})" class="guide_item">
      <svg class="icon_style">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('profile') !== -1? '#profileActive' : '#profile'"/>
      </svg>
      <span>我的</span>
    </section>
  </section>
</template>

<script>
  import pinia from "../../store/store.js";
  import {useMainStore} from "../../store/index.js";
export default {
  name: "footGuide",
  data:()=>({
    mainStore: null,
    geohash: null,
  }),
  created() {
    this.mainStore = useMainStore(pinia);
    this.geohash = this.mainStore.geohash;
  },
  methods:{
    gotoAddress(path){
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "src/style/mixin.scss";
  #foot_guide{
    background-color: #fff;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    @include wh(100%, 1.95rem);
    display: flex;
    //阴影
    box-shadow: 0 -0.025rem 0.05rem rgba(0,0,0,.1);
  }
  .guide_item{
    //在flex布局中占1份
    flex: 1;
    display: flex;
    //有align-items在，这个属性似乎不怎么需要
    text-align: center;
    flex-direction: column;
    align-items: center;
    .icon_style{
      @include wh(.8rem, .8rem);
      margin-top: .3rem;
      fill: #ccc;
    }
    span{
      @include sc(.45rem, #666);
      margin-top: .1rem;
    }
  }
</style>

profile.vue

profile.vue也没什么难点，就css中有些属性不懂，但解释已经注释了，直接上代码

<template>
  <div class="profile_page">
    <head-top go-back="true" :head-title="profiletitle"></head-top>
    <section>
      <section class="profile-number">
        <router-link :to="userInfo&&userInfo.user_id? '/profile/info':'/login'" class="profile-link">
          <img :src="imgBaseUrl + userInfo.avatar" class="privateImage" v-if="userInfo&&userInfo.user_id">
          <span class="privateImage" v-else>
            <svg class="privateImage-svg">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
            </svg>
          </span>
          <div class="user-info">
            <p>{{username}}</p>
            <p>
              <span class="user-icon">
                <svg class="icon-mobile" fill="#fff">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
                </svg>
              </span>
              <span class="icon-mobile-number">{{mobile}}</span>
            </p>
          </div>
          <span class="arrow">
            <svg class="arrow-svg" fill="#fff">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </router-link>
      </section>
      <section class="info-data">
        <ul class="clear">
          <router-link to="/balance" tag="li" class="info-data-link">
            <span class="info-data-top"><b>{{parseInt(balance).toFixed(2)}}</b>元</span>
            <span class="info-data-bottom">我的余额</span>
          </router-link>
          <router-link to="/benefit" tag="li" class="info-data-link">
            <span class="info-data-top"><b>{{count}}</b>个</span>
            <span class="info-data-bottom">我的优惠</span>
          </router-link>
          <router-link to="/points" tag="li" class="info-data-link">
            <span class="info-data-top"><b>{{pointNumber}}</b>分</span>
            <span class="info-data-bottom">我的积分</span>
          </router-link>
        </ul>
      </section>
      <section class="profile-1reTe">
<!--        我的订单-->
        <router-link to="/order" class="myorder">
          <aside>
            <svg fill="#4aa5f0">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>我的订单</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
<!--        积分商城-->
        <a to="https://home.m.duiba.com.cn/#/chome/index" class="myorder">
          <aside>
            <svg fill="#fc7b53">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#point"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>积分商城</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </a>
        <router-link to="/vipcard" class="myorder">
          <aside>
            <svg fill="#ffc636">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vip"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>饿了么会员卡</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
      </section>
      <section class="profile-1reTe">
        <router-link to="/service" class="myorder">
          <aside>
            <svg fill="#4aa5f0">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use>
            </svg>
          </aside>
          <div class="myorder-div">
            <span>服务中心</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
        <router-link to="/download" class="myorder">
          <aside>
            <svg fill="#3cabff">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
            </svg>
          </aside>
          <div class="myorder-div" style="border-bottom:0;">
            <span>下载饿了么APP</span>
            <span class="myorder-divsvg">
              <svg fill="#bbb">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </router-link>
      </section>
    </section>
    <foot-guide></foot-guide>
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in" appear>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
<!--    <transition name="router-slid" mode="out-in">-->
<!--      <router-view></router-view>-->
<!--    </transition>-->
  </div>
</template>

<script>
import headTop from "../../components/header/head.vue";
import footGuide from "../../components/footer/footGuide.vue";
import {useMainStore} from "../../store/index.js";
import pinia from "../../store/store.js";
export default {
  name: "profile",
  data:()=>({
    mainStore: null,
    profiletitle:"我的",
    username:"登录/注册",
    resetname:"",
    mobile:"暂无绑定手机号",
    balance:0, //我的余额
    count:0, //优惠券个数
    pointNumber:0, //积分数
    avatar:'',  //头像地址
    userInfo: null,
    imgBaseUrl:null,
  }),
  components:{
    headTop,
    footGuide,
  },
  created() {
    this.mainStore = useMainStore(pinia);
  },
  mounted() {
    this.initData();
  },
  methods:{
    async initData(){
      this.userInfo = this.mainStore.userInfo;
      if (this.userInfo && this.userInfo.user_id){
        this.avatar = this.userInfo.avatar;
        this.username = this.userInfo.username;
        this.mobile = this.userInfo.mobile || "暂无绑定手机号";
        this.balance = this.userInfo.balance;
        this.count = this.userInfo.gift_amount;
        this.pointNumber = this.userInfo.point;
      }else {
        this.username = "登录/注册"
        this.mobile = "暂无绑定手机号"
      }
    }
  },
  watch:{
    // userInfo数据更改时重新初始化数据
    userInfo:function (value){
      this.initData();
    }
  }
}
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .profile_page{
    p, span{
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .profile-number{
    padding-top:1.95rem;
    .profile-link{
      display:flex;
      //定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
      align-items: center;
      background:$blue;
      padding: .666667rem .6rem;
      .privateImage{
        display:inline-block;
        @include wh(2.5rem,2.5rem);
        border-radius:50%;
        vertical-align:middle;
        .privateImage-svg{
          background:$fc;
          border-radius:50%;
          @include wh(2.5rem,2.5rem);
        }
      }
      .user-info{
        margin-left:.48rem;
        // box-flex可以被flex取代，且box-flex只能用于IE，其他浏览器要加前缀，flex不用
        // box-flex用于display:box,flex用于display:flex
        // https://www.5axxw.com/questions/simple/gqpsm8
        //-webkit-box-flex: 1;
        //-moz-box-flex: 1;
        // flex和flex-grow计算方式不同：https://blog.csdn.net/lorem233/article/details/106319675/
        // 由于在这个flex的父元素中只有.user-info有使用剩余空间，所以用哪一种都行
        //flex-grow: 1;
        flex: 1;
        p{
          font-weight:700;
          @include sc(.8rem,$fc);
          .user-icon{
            @include wh(0.5rem,0.75rem);
            display:inline-block;
            vertical-align:middle;
            line-height:0.75rem;
            .icon-mobile{
              @include wh(100%,100%);
            }
          }
          .icon-mobile-number{
            display:inline-block;
            @include sc(.57333rem,$fc);
            margin-left: .2rem;
          }
        }
      }
      .arrow{
        @include wh(.46667rem,.98rem);
        display:inline-block;
        svg{
          @include wh(100%,100%);
        }
      }
    }
  }
  .info-data{
    width: 100%;
    background: $fc;
    // 盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）
    // box-sizing:border-box让padding和border的值不影响元素的宽高，相当于把padding和border的值都算在content里
    // 盒子模型会自动根据padding和border的值来调整content的值
    // https://blog.csdn.net/qq_38110572/article/details/118218549
    box-sizing: border-box;
    ul{
      .info-data-link{
        float: left;
        width: 33.33%;
        display: inline-block;
        border-right: 1px solid #f1f1f1;
        span{
          display: block;
          width: 100%;
          text-align: center;
        }
        .info-data-top{
          @include sc(.55rem,#333);
          padding: .853332rem 0 .453333rem;
          b{
            display: inline-block;
            @include sc(1.2rem,#f90);
            font-weight: 700;
            line-height: 1rem;
            font-family: Helvetica Neue,Tahoma;
          }
        }
        .info-data-bottom{
          @include sc(.57333rem,#666);
          font-weight: 400;
          padding-bottom: .453333rem;
        }
      }
      .info-data-link:nth-of-type(2){
        .info-data-top{
          b{
            color: #ff5f3e;
          }
        }
      }
      .info-data-link:nth-of-type(3){
        .info-data-top{
          b{
            color: #6ac20b;
          }
        }
      }
    }
  }
  .profile-1reTe{
    margin-top: .4rem;
    background: $fc;
    .myorder{
      padding-left: 1.6rem;
      display: flex;
      align-items: center;
      //nav,aside,section,div:https://blog.csdn.net/qq_43566496/article/details/87627899
      aside{
        @include wh(.7rem,.7rem);
        margin-left:-.866667rem;
        margin-right:.266667rem;
        display: flex;
        align-items: center;
        svg{
          @include wh(100%,100%);
        }
      }
      .myorder-div{
        width: 100%;
        border-bottom:1px solid #f1f1f1;
        padding:.433333rem .266667rem .433333rem 0;
        @include sc(.7rem,#333);
        display: flex;
        justify-content: space-between;
        .myorder-divsvg{
          @include wh(.46667rem,.466667rem);
          svg{
            @include wh(100%,100%);
          }
        }
      }
    }
  }
  /* 路由切换动画 */
  /* fade-transform */
  .fade-leave-active,
  .fade-enter-active {
    transition: all 0.5s;
  }

  /* 可能为enter失效，拆分为 enter-from和enter-to */
  .fade-enter-from {
    opacity: 0;
    transform: translateY(-30px);
  }
  .fade-enter-to {
    opacity: 1;
    transform: translateY(0px);
  }

  .fade-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
</style>

balance.vue

balance.vue

我的余额页面也没什么难度，代码如下：

<template>
  <div class="page">
    <head-top go-back="true" head-title="我的余额"></head-top>
    <section class="content_container">
      <section class="content">
        <header class="content_header">
          <span class="content_title_style">当前余额</span>
          <section class="content_description">
            <img src="../../images/description.png" width="24" height="24">
            <router-link to="/balance/detail" class="content_title_style">余额说明</router-link>
          </section>
        </header>
        <p class="content_num">
          <span>0.00</span>
          <span>元</span>
        </p>
        <div class="promit_button">提现</div>
      </section>
    </section>
    <p class="deal_detail">交易明细</p>
    <div class="no_log">
      <img src="../../images/no-log.png">
      <p>暂无明细记录</p>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import headTop from "../../components/header/head.vue";
export default {
  name: "balance",
  components:{
    headTop
  }
}
</script>

<style lang="scss" scoped>
  @import "../src/style/mixin";

  .page{
    padding-top: 1.95rem;
    p,span{
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }

  .content_container{
    padding: .3rem;
    background-color: $blue;
    .content{
      padding: .4rem;
      background-color: #fff;
      border-radius: .15rem;
      .content_header{
        @include fj;
        font-size: .55rem;
        .content_title_style{
          color: #666;
        }
        .content_description{
          display: flex;
          align-items: center;
          img{
            @include wh(.6rem, .6rem);
            margin-right: .2rem;
          }
          .content_title_style{
            color: $blue;
          }
        }
      }
      .content_num{
        span:nth-of-type(1){
          @include sc(1.8rem, #333);
        }
        span:nth-of-type(2){
          @include sc(.7rem, #333);
          margin-left: .3rem;
        }
      }
      .promit_button{
        background-color: #ccc;
        text-align: center;
        @include wh(100%, 2rem);
        @include sc(.8rem, #fff);
        line-height: 2rem;
        border-radius: 0.15rem;
        margin-top: 1rem;
      }
    }
  }
  .deal_detail{
    @include sc(.6rem, #999);
    line-height: 2rem;
    padding-left: .5rem;
  }
  .no_log{
    text-align: center;
    margin-top: 1rem;
    img{
      @include wh(8rem, 5rem);
    }
    p{
      margin-top: .5rem;
      @include sc(.7rem, #666);
    }
  }
</style>

points.vue

积分页面也余额页面类似，就多了个提示框

<template>
  <div class="page">
    <head-top go-back="true" head-title="我的积分"></head-top>
    <section class="content_container">
      <section class="content">
        <header class="content_header">
          <span class="content_title_style">当前积分</span>
          <section class="content_description">
            <img src="../../images/description.png" width="24" height="24">
            <router-link to="/balance/detail" class="content_title_style">积分说明</router-link>
          </section>
        </header>
        <p class="content_num">
          <span>0</span>
          <span>分</span>
        </p>
        <div class="promit_button" @click="usePoint">积分兑换商品</div>
      </section>
    </section>
    <p class="deal_detail">最近30天积分记录</p>
    <div class="no_log">
      <img src="../../images/no-log.png">
      <p>最近30天无积分记录</p>
      <p>快去下单赚取大量积分吧</p>
    </div>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alert-text="alertText"></alert-tip>
    <router-view></router-view>
  </div>
</template>

<script>
  import headTop from "../../components/header/head.vue";
  import alertTip from "../../components/common/alertTip.vue";
  export default {
    name: "points",
    data:() => ({
      showAlert: false,
      alertText: null,
    }),
    components:{
      headTop,
      alertTip,
    },
    methods:{
      usePoint(){
        this.showAlert = true;
        this.alertText = '快去下单赚取大量积分吧';
      },
    }
  }
</script>

<style lang="scss" scoped>
@import "../src/style/mixin";

.page{
  padding-top: 1.95rem;
  p,span{
    font-family: Helvetica Neue,Tahoma,Arial;
  }
}

.content_container{
  padding: .3rem;
  background-color: $blue;
  .content{
    padding: .4rem;
    background-color: #fff;
    border-radius: .15rem;
    .content_header{
      @include fj;
      font-size: .55rem;
      .content_title_style{
        color: #666;
      }
      .content_description{
        display: flex;
        align-items: center;
        img{
          @include wh(.6rem, .6rem);
          margin-right: .2rem;
        }
        .content_title_style{
          color: $blue;
        }
      }
    }
    .content_num{
      span:nth-of-type(1){
        @include sc(1.8rem, #333);
      }
      span:nth-of-type(2){
        @include sc(.7rem, #333);
        margin-left: .3rem;
      }
    }
    .promit_button{
      background-color: #fe6d47;
      text-align: center;
      @include wh(100%, 2rem);
      @include sc(.8rem, #fff);
      line-height: 2rem;
      border-radius: 0.15rem;
      margin-top: 1rem;
    }
  }
}
.deal_detail{
  @include sc(.6rem, #999);
  line-height: 2rem;
  padding-left: .5rem;
}
.no_log{
  text-align: center;
  margin-top: 1rem;
  img{
    @include wh(8rem, 5rem);
  }
  p{
    margin-top: .5rem;
    @include sc(.7rem, #666);
  }
  p:nth-of-type(2){
    @include sc(.5rem, #999);
  }
}
</style>

profile.vue的transition碰到了点问题没解决。
问题：vue的transition标签不起作用
解决：vue3使用transition和router-view的方式和vue2不同，但新的方式似乎还是没用。