save

components/common/header/index.vue

@@ -51,6 +51,8 @@
       title="退出游戏"
       message="机器中所有剩余的积分将自动转回您的钱包。"
       @confirm="() => quitGame()"/>
+    <!-- 个人中心弹窗 -->
+    <UserDialog/>
   </div>
 </template>
 
@@ -60,6 +62,7 @@ import dayjs from 'dayjs'
 import screenfull from 'screenfull'
 import { mapState } from 'vuex'
 import Confirm from '@/components/dialog/confirm'
+import UserDialog from '@/components/dialog/user-dialog/index'
 export default {
   filters: {
     filterData(time) {
@@ -71,6 +74,7 @@ export default {
   },
   components: {
     Confirm,
+    UserDialog,
   },
   data() {
     // 卡片

components/dialog/user-dialog/index.vue

+<template>
+  <div>
+    <div class="mark"/>
+    <div>
+      个人中心
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const imagesList = [
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-sel.png',
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/small-nor.png',
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-nor.png',
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2018.png', // 滑块
+    ]
+    return {}
+  },
+}
+</script>
+
+<style scoped>
+.mark {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: black;
+  opacity: 0.3;
+}
+</style>

pages/test.vue

@@ -44,5 +44,7 @@ export default {
 }
 .img {
   display: inline-block;
+  max-height: 100px;
+  max-width: 100px;
 }
 </style>