feat: add right menu

package.json

@@ -10,6 +10,7 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "date-fns": "^2.30.0",
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
     "parallax-js": "^3.1.0",

src/components/icons/Add.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup></script>
+
+<template>
+  <svg width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+    />
+  </svg>
+</template>
+
+<style lang="scss" scoped></style>

src/components/icons/Battery.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineProps<{
+  level: number
+}>()
+</script>
+
+<template>
+  <svg viewBox="0 0 12 12" width="1em" height="1em">
+    <g fill="currentColor">
+      <path d="M10,4.5v-2H1v7h9v-2h1v-3H10z M9,8.5H2v-5h7V8.5z" />
+      <rect v-if="level > 0" x="7" y="4.5" width="1" height="3" />
+      <rect v-if="level > 1" x="5" y="4.5" width="1" height="3" />
+      <rect v-if="level > 2" x="3" y="4.5" width="1" height="3" />
+    </g>
+  </svg>
+</template>
+
+<style lang="scss" scoped></style>

src/store/modules/user.ts

@@ -17,8 +17,7 @@ export const useUserStore = defineStore('user', () => {
   })
 
   const fightInfo = reactive({
-    level: '2-3',
-    name: '无罪推定',
+    name: '2-3 无罪推定',
   })
 
   return {

src/styles/global.scss

@@ -7,3 +7,7 @@ body,
 body {
   font-size: 16px;
 }
+
+* {
+  box-sizing: border-box;
+}

src/views/home/components/right-menu/asset-info.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+import IconAdd from '@/components/icons/Add.vue'
+
+const userStore = useUserStore()
+</script>
+
+<template>
+  <div class="asset-info">
+    <div class="item">
+      <img class="icon" src="@/assets/images/money.png" alt="money" />
+      <span class="number">{{ userStore.asset.money }}</span>
+    </div>
+    <div class="item">
+      <img class="icon" src="@/assets/images/gem.png" alt="gem" />
+      <span class="number">{{ userStore.asset.gem }}</span>
+      <IconAdd class="button" />
+    </div>
+    <div class="item">
+      <img class="icon" src="@/assets/images/stone.png" alt="stone" />
+      <span class="number">{{ userStore.asset.stone }}</span>
+      <IconAdd class="button" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.asset-info {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-left: 80px;
+  transform: translateX(-80px);
+}
+.asset-info::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  top: 7px;
+  left: 0;
+  right: 0;
+  bottom: 7px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  font-size: 30px;
+  color: white;
+  text-shadow: 4px 3px 2px #333;
+  margin-right: 20px;
+
+  .icon {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    margin-right: 16px;
+    filter: drop-shadow(4px 3px 2px #333);
+  }
+
+  .number {
+    margin-right: 4px;
+  }
+
+  .button {
+    filter: drop-shadow(4px 3px 2px #333);
+  }
+}
+</style>

src/views/home/components/right-menu/fight-row.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+
+const userStore = useUserStore()
+</script>
+
+<template>
+  <div class="fight-row">
+    <div class="sense">
+      <img class="bg" src="@/assets/images/mind.png" alt="mind" />
+      <div class="current">{{ userStore.asset.sense }}</div>
+      <div class="max">理智/90</div>
+    </div>
+    <div class="fight">
+      <div class="title">终端</div>
+      <span class="tag">当前</span>
+      <div class="level">{{ userStore.fightInfo.name }}</div>
+    </div>
+    <div class="mark">
+      <img class="icon" src="@/assets/images/image1.png" alt="icon" />
+      <img class="right-bottom" src="@/assets/images/image10.png" alt="right bottom" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.fight-row {
+  position: relative;
+  width: 800px;
+  height: 200px;
+  padding: 12px;
+  background-color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  color: #333;
+  margin-bottom: 16px;
+
+  &:hover {
+    background-color: white;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    bottom: -2px;
+    left: 300px;
+    height: 5px;
+    width: 380px;
+    background-color: #f85711;
+  }
+}
+
+.sense {
+  position: relative;
+  width: 240px;
+  margin-right: 20px;
+
+  .bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+  .current {
+    position: relative;
+    font-size: 80px;
+    line-height: 108px;
+    padding-left: 48px;
+    text-align: center;
+    font-weight: bold;
+    text-shadow: 5px 4px 2px #888;
+    margin-bottom: 8px;
+  }
+
+  .max {
+    position: relative;
+    font-size: 32px;
+    padding-left: 24px;
+    text-align: center;
+    color: white;
+  }
+}
+
+.fight {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  .title {
+    font-size: 75px;
+    font-family: 'FZSong';
+    margin-bottom: 4px;
+  }
+
+  .tag {
+    padding: 4px 6px;
+    font-size: 24px;
+    background-color: #333;
+    color: white;
+    border-radius: 4px;
+    margin-bottom: 4px;
+  }
+
+  .level {
+    font-size: 24px;
+  }
+}
+
+.mark {
+  position: absolute;
+  inset: 0;
+  .icon {
+    position: absolute;
+    left: 380px;
+    top: 15px;
+    width: 170px;
+    height: 170px;
+    filter: invert(20%) drop-shadow(30px 0 0 rgba(0, 0, 0, 0.1));
+  }
+
+  .right-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 128px;
+    filter: invert(50%);
+    opacity: 0.3;
+  }
+}
+</style>

src/views/home/components/right-menu/index.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import SystemInfo from './system-info.vue'
+import AssetInfo from './asset-info.vue'
+import FightRow from './fight-row.vue'
+import TeamRow from './team-row.vue'
+import ShopRow from './shop-row.vue'
+import OtherRow from './other-row.vue'
+</script>
+
+<template>
+  <div class="right-menu">
+    <div class="content">
+      <SystemInfo />
+      <AssetInfo />
+      <FightRow />
+      <TeamRow />
+      <ShopRow />
+      <OtherRow />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.right-menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  transform-origin: right center;
+  pointer-events: auto;
+  user-select: none;
+  transform: perspective(600px) rotateY(-10deg);
+}
+</style>