最新啦

XIGUASSR

2022-11-10 c4e1a40b8342823103a494d342960cbc4c5be5a5

最新啦

 src/assets/img/dun.png

 src/assets/img/gnjy.png

 src/assets/img/kefu.png

 src/assets/img/shezhi.png

 src/assets/img/youjiantou.png

 src/page/newUser/index.vue

New file
@@ -0,0 +1,340 @@
<template>
  <div class="user_page">
    <div class="content">
      <div class="top_icon">
        <div class="right_icon">
          <div>
            <img src="../../assets/img/dun.png" alt />
          </div>
          <div>
            <img src="../../assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="users">
        <div class="left_tou">
          <div class="left_tx">
            <div></div>
          </div>
          <div class="right_name">
            <span>{{ name }}</span>
          </div>
        </div>
        <div class="right_go">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="center_card">
        <div class="keyon">
          <span>{{ '总资产' }}</span>
        </div>
        <div class="num_price">
          <p
            v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userIndexAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account"
          >
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
            $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}
          </p>
          <p
            v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account"
          >¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ '盈亏' }}</span>
          </div>
          <div>
            <span>{{ '可用余额(¥)' }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span v-if="selectUserFlag">
              <span
                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
              >{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
            </span>
            <span v-else>
              <span
                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
              >{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span>
            </span>
          </div>
          <div>
            <span class="bzz" v-if="selectUserFlag">
              {{ '¥ ' + $store.state.userInfo.userIndexAmt }}
            </span>
            <span class="bzz" v-else>
              {{ '¥ ' + $store.state.userInfo.userAmt }}
            </span>
          </div>
        </div>
        <div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
          <span>{{ selectUserFlag ? '切换沪深账户' : '切换指数账户' }}</span>
        </div>
      </div>
      <div class="jy">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shezhi.png" alt />
          </div>
          <div class="r_title">
            <span>{{ '设置' }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/axios/api";

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true
    };
  },
  created() {
    this.userInfo();
  },
  methods: {
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;
    },
    userInfo() {
      api.getUserInfo().then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style scoped lang="less">
.user_page {
  width: 100%;
  height: calc(100% - 1.3rem);
  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
    .top_icon {
      width: 100%;
      height: 1.5rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .right_icon {
        width: 25%;
        height: 50%;
        display: flex;
        > div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.6rem;
            height: 0.6rem;
          }
        }
      }
    }
    .users {
      width: 100%;
      height: 1.7949rem;
      background: #fff;
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left_tou {
        width: 80%;
        height: 70%;
        display: flex;
        .left_tx {
          width: 20%;
          height: 100%;
          margin-left: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
          > div {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
          }
        }
        .right_name {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4415rem;
          span {
            font-weight: 600;
          }
        }
      }
      .right_go {
        width: 20%;
        height: 70%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.2rem;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
    .center_card {
      width: 100%;
      height: 5.3846rem;
      background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
      // background-image: linear-gradient(to right, #ffffff , #dfedfc);
      margin-top: 0.5rem;
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;
      .keyon {
        width: 100%;
        height: 0.5128rem;
        font-size: 0.359rem;
        display: flex;
        align-items: center;
        color: #3d4144;
        span {
          font-weight: 600;
        }
      }
      .num_price {
        width: 100%;
        height: 0.6667rem;
        margin-top: 0.1rem;
        display: flex;
        align-items: center;
        font-size: 0.5528rem;
        span {
          font-weight: 600;
        }
      }
      .yk {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        > div {
          width: 50%;
          height: 100%;
          color: #97989d;
          display: flex;
          align-items: center;
        }
      }
      .yk.es {
        margin-top: 0.3rem;
      }
      .yk.as {
        font-size: 0.4033rem;
        margin-top: 0.1rem;
        span {
          color: #000;
          font-weight: 600;
        }
        .bzz {
          color: #4ea364;
        }
      }
      .btns {
        width: 100%;
        height: 1.2821rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        background: #2d6ae9;
        font-size: 0.4015rem;
        color: #fff;
        margin-top: 0.35rem;
        span {
          font-weight: 600;
        }
      }
      .active {
        background: #4ea364;
      }
    }
    .jy {
      width: 100%;
      height: 1.5rem;
      border-radius: 0.2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.3rem;
      margin-top: 0.3rem;
      .left_gn {
        width: 40%;
        height: 60%;
        display: flex;
        .l_icon {
          width: 30%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 0.5041rem;
            height: 0.5041rem;
          }
        }
        .r_title {
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4046rem;
          color: #404040;
          span {
            font-weight: 600;
          }
        }
      }
      .right_gos {
        width: 20%;
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
}
</style>

 src/router/index.js

@@ -49,6 +49,7 @@
import NewGg from '@/page/home/newGg'
import KLine from '@/page/kline/index.vue'
import TradingBuy from '@/page/trading/buy.vue'
import NewUser from '@/page/newUser/index.vue'

Vue.use(Router)

@@ -624,6 +625,17 @@
      component: TradingBuy
    },
    {
      path: '/NewUser',
      name: 'NewUser',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 51,
      },
      component: NewUser
    },
    {
      // 会匹配所有路径
      path: '*',
      redirect: '/home'