个人中心-dev

components/dialog/user-dialog/index.vue

@@ -5,7 +5,7 @@
       <img class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
       <div class="box">
         <Tab @on-change="(index) => { tabIndex = index}"/>
-        <div class="dialog-content" style="padding: 2px; flex: 1; overflow: auto;">
+        <div class="dialog-content">
           <Load>
             <!-- 个人资料 -->
             <Info v-show="tabIndex === 0" :level-current="levelCurrent" :latest-achievement="latestAchievement" />
@@ -142,6 +142,9 @@ export default {
         background-color: #003649;
         background-image: linear-gradient(#004156, #00212e);
         background-image: linear-gradient(#00212e, #004156);
+        padding: 2px;
+        flex: 1;
+        overflow: auto;
       }
     }
   }

components/dialog/user-dialog/score-log-btn.vue

+<template>
+  <div class="btn" @click="$emit('click')">
+    <img class="icon" src="" alt="">
+    <div class="text">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '按钮',
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  border-radius: 100px;
+  border: 2px solid #0f8388;
+  padding: 4px;
+  display: flex;
+  line-height: 16px;
+  font-size: 12px;
+  color: #16bcc6;
+  .icon {
+    height: 16px;
+  }
+  .text {
+    flex: 1;
+    text-align: center;
+  }
+}
+</style>

components/dialog/user-dialog/score-log.vue

 <template>
-  <span style="padding: 8px;">开发中...</span>
+  <div class="score-block">
+    <div class="btn-block">
+      <SoreBtn :class="{active: index === 0}" class="btn" style="width: 100px; flex: none;" text="终览" @click="index = 0"/>
+      <SoreBtn :class="{active: index === 1}" class="btn" text="游戏交易" @click="index = 1"/>
+      <SoreBtn :class="{active: index === 2}" class="btn" text="代理人交易" @click="index = 2"/>
+      <SoreBtn :class="{active: index === 3}" class="btn" text="活动与奖励" @click="index = 3"/>
+    </div>
+    <div class="header">
+      <div class="date">日期</div>
+      <div class="start">开始余额</div>
+      <div class="change">转账额</div>
+      <div class="end">结束金额</div>
+      <div class="remark">备注</div>
+    </div>
+  </div>
 </template>
+
+<script>
+import SoreBtn from './score-log-btn'
+export default {
+  components: {
+    SoreBtn,
+  },
+  data() {
+    return {
+      index: 0,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-block {
+  display: flex;
+  position: relative;
+  z-index: 100;
+  flex: 1;
+  gap: 4px;
+  .btn {
+    flex: 1;
+    &.active {
+      border-color: #25f4e3;
+    }
+  }
+}
+.header {
+  display: flex;
+  text-align: center;
+  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/%E7%9F%A9%E5%BD%A2%202.png);
+  background-size: 100% 100%;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #102829;
+  font-weight: bold;
+  margin-top: 4px;
+  .date {
+    width: 200px;
+  }
+  .start {
+    width: 200px;
+  }
+  .change {
+    width: 160px;
+  }
+  .end {
+    width: 160px;
+  }
+  .remark {
+    width: 160px;
+  }
+}
+</style>