提交pc端

package.json

@@ -40,6 +40,8 @@
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",
-    "vue-tsc": "^1.2.0"
+    "vite-plugin-windicss": "^1.9.4",
+    "vue-tsc": "^1.2.0",
+    "windicss": "^3.5.6"
   }
 }

src/components/pc/footer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import logoCn from '@/assets/images/logoCn.png'
+import logoEn from '@/assets/images/logoEn.png'
 </script>
 
 <template>

src/components/pc/index.vue

@@ -1,44 +1,139 @@
 <script setup lang="ts">
-import Header from "./header.vue";
-import Footer from "./footer.vue";
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, useRoute } from 'vue-router'
+import Header from './header.vue'
+import Footer from './footer.vue'
+const { locale: language, t } = useI18n()
+const router = useRouter();
+const active = ref({
+  name: 'information',
+  to: { name: 'information' }
+})
+
+const normalSettings = [
+  {
+    name: t('manage.information.nameArr.information'),
+    icon: 'nav_my',
+    to: { name: 'information' }
+  },
+  {
+    name: t('manage.information.nameArr.scene'),
+    icon: 'nav_scene',
+    to: { name: 'scene' }
+  },
+  {
+    name: t('manage.information.nameArr.device'),
+    icon: 'nav_cam',
+    to: { name: 'device' }
+  },
+  {
+    name: t('manage.information.nameArr.order'),
+    icon: 'nav_order',
+    to: { name: 'order' }
+  },
+  {
+    name: t('manage.information.nameArr.products'),
+    icon: 'nav_data',
+    to: { name: 'appProduct' }
+  }
+]
+function tabHandle(sub) {
+    active.value = sub
+    router.push(sub.to) 
+}
 </script>
 
 <template>
-    <div class="container">
-      <Header />
-      <div class="main_container">
-        <router-view class="contentPage" />
+  <div class="personalCenter">
+    <Header />
+    <div class="main_container">
+      <div class="manage-body flex justify-center">
+        <div class="mc-left">
+          <div>
+            <ul class="list-items">
+              <li
+                @click="tabHandle(sub)"
+                v-for="(sub, i) in normalSettings"
+                :key="i"
+                :class="{
+                  active: active.to.name === sub.to.name,
+                  'logout-span': sub.name === '退出登录' || sub.name === 'Log out'
+                }"
+              >
+                <span
+                  ><h-icon class="nav-icon" v-if="sub.icon" :type="sub.icon"></h-icon
+                  >{{ sub.name }}</span
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="mc-right">
+          <router-view />
+        </div>
       </div>
-      <Footer />
     </div>
+    <Footer />
+  </div>
 </template>
 
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
+<style lang="less" scoped>
+.manage-body {
+  min-height: 676px;
+  padding: 80px 0;
+  background-color: #f4f4f6;
+  .container {
+    display: flex;
+  }
+  .mc-left {
+    flex-shrink: 0;
+    margin-right: 30px;
+    .list-items {
+      font-size: 16px;
+      display: inline-block;
+      margin-bottom: 50px;
+      width: 100%;
+      padding: 30px 0;
+      background: #fff;
+      width: 274px;
+      li {
+        width: 100%;
+        line-height: 48px;
+        padding-left: 50px;
+        color: #909090;
+        cursor: pointer;
+        &.active {
+          color: #323233;
+          background: #ebebeb;
+        }
+        .nav-icon {
+          margin-right: 9px;
+        }
+        span {
+          display: inline-block;
+          position: relative;
+          vertical-align: middle;
+          display: flex;
+          align-items: center;
+        }
 
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-.container{
-  min-height: 100vh;
-}
-.main_container{
-  min-height: calc(100vh - 163px);
-  background-color: #F7F7F7;
-}
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
+        .logout-span {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+  .mc-right {
+    .mc-title {
+      margin-left: 40px;
+      margin-top: 34px;
+      font-size: 28px;
+      color: #2d2d2d;
+      font-weight: bold;
+    }
   }
 }
 </style>

src/i18n/zh.js

@@ -1,6 +1,87 @@
 export default {
     confirm: {
-        text:'确认'
+        text: '确认'
+    },
+    manage: {
+        "information": {
+            "uploadTip": "图片大小不能大于",
+            "editInformation": "修改信息",
+            "editAddressLinkText": "修改地址",
+            "editInfo": "修改账号信息",
+            "gotoPay": "购买权益",
+            "memberDevice": "权益相机",
+            "expiredDownload": "剩余下载",
+            "takePhotos": "拍摄场景",
+            "defaultAddress": "默认收货地址",
+            "informationOverview": "账户概览",
+            "uploadAvatar": "上传头像",
+            "uploadAvatarTips": "推荐分辨率为：512*512px，<br/>允许JPG、PNG格式，小于1MB",
+            "userName": "账号",
+            "nickName": "昵称",
+            "email": "邮箱",
+            "cameraCount": "相机数量",
+            "memberCount": "权益数量",
+            "tai": "台",
+            "ci": "次",
+            "ge": "个",
+            "tai1": "(台)",
+            "ci1": "(次)",
+            "ge1": "(个)",
+            "editAddress": {
+                "editAddress": "修改收货地址",
+                "country": "国家/地区",
+                "province": "省",
+                "city": "市",
+                "qu": "区",
+                "addressDetail": "详细地址",
+                "receiver": "收件人",
+                "receiverPhone": "手机号码",
+                "internationalCity": "城市",
+                "internationalProvince": "州/省/地区"
+            },
+            "changePassword": {
+                "changePassword": "修改密码",
+                "verCode": "验证码",
+                "newPassword": "新密码",
+                "confirmNewPassword": "确认密码"
+            },
+            "memberTable": {
+                "deviceMember": "会员权益",
+                "bindDeviceNum": "授权相机{num}台",
+                "snInputPlaceHolder": "搜索相机S/N码",
+                "searchNoData": "抱歉，没有找到相关信息。",
+                "nodataPre": "请先购买会员权益",
+                "nodataGoBuy": "购买权益",
+                "isExpired": "已过期"
+            },
+            "nameArr": {
+                "information": "账号信息",
+                "scene": "场景管理",
+                "order": "我的订单",
+                "device": "我的相机",
+                "consumption": "消费记录",
+                "change": "修改密码",
+                "logout": "退出登录",
+                "products": "应用中心"
+            },
+            "deviceSettings": [
+                {
+                    "name": "security",
+                    "items": [
+                        {
+                            "name": "场景管理",
+                            "to": {
+                                "name": "scene"
+                            }
+                        },
+                        {
+                            "name": "退出登录",
+                            "to": "logout"
+                        }
+                    ]
+                }
+            ]
+        },
     },
     payInfo: {
         payErr: '支付异常',
@@ -9,19 +90,19 @@ export default {
         payTitle: '支付中心',
         userName: '当前账号',
         membership: '购买会员',
-        zyhy:'会员权益',
+        zyhy: '会员权益',
         gjhy: '高级会员',
         zyhys: '专业会员',
-        expiration:'有效期{num}年',
-        expirationmon:'有效期{num}个月',
+        expiration: '有效期{num}年',
+        expirationmon: '有效期{num}个月',
         payCenter: "支付中心",
-        wx:'微信支付',
-        zfb:'支付宝支付',
-        paypal:'paypal',
-        payPrice:'应付金额',
-        priceUnit:'¥',
-        payOrder:'付款',
-        autoRenew:'订阅',
+        wx: '微信支付',
+        zfb: '支付宝支付',
+        paypal: 'paypal',
+        payPrice: '应付金额',
+        priceUnit: '¥',
+        payOrder: '付款',
+        autoRenew: '订阅',
         autoPayTips: '会员权益订阅成功，订单支付处理时间可能需要1~2个小时，请耐心等待。 （可在{paytype}查阅实际支付情况）',
     },
     mall: {

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import i18n from './i18n/index.js'
 
+import 'virtual:windi.css'
 import 'element-plus/dist/index.css'
 import './assets/main.css'
 // import './utils/vconsole.js'

src/views/pc/index.vue

@@ -281,7 +281,8 @@ async function getCode() {
 
 <style lang="less" scoped>
 .mall-pay {
-  padding: 61px 0 61px;
+  padding: 0px 0 61px;
+  width: 972px;
   background: #f7f7f7;
   .container {
     background: #fff;

vite.config.ts

@@ -5,10 +5,12 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import legacy from "@vitejs/plugin-legacy";
 import vue from '@vitejs/plugin-vue'
 import path from "path";
+import WindiCSS from 'vite-plugin-windicss'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
+    WindiCSS(),
     vue(),    
     // require('unplugin-element-plus/webpack')(),
     // ...

yarn.lock

@@ -10,6 +10,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@antfu/utils@^0.7.10":
+  version "0.7.10"
+  resolved "https://registry.npmmirror.com/@antfu/utils/-/utils-0.7.10.tgz#ae829f170158e297a9b6a28f161a8e487d00814d"
+  integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
+
 "@antfu/utils@^0.7.2":
   version "0.7.2"
   resolved "http://192.168.0.47:4873/@antfu/utils/-/utils-0.7.2.tgz#3bb6f37a6b188056fe9e2f363b6aa735ed65d7ca"
@@ -1187,6 +1192,11 @@
   resolved "http://192.168.0.47:4873/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
+"@jridgewell/sourcemap-codec@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz#6912b00d2c631c0d15ce1a7ab57cd657f2a8f8ba"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.18"
   resolved "http://192.168.0.47:4873/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
@@ -1557,6 +1567,28 @@
   dependencies:
     vue-demi "*"
 
+"@windicss/config@1.9.4":
+  version "1.9.4"
+  resolved "https://registry.npmmirror.com/@windicss/config/-/config-1.9.4.tgz#42f75245afbaf41c43219a363ac2e2f8b627b7ba"
+  integrity sha512-vKXJlEC01/LFuYLF6XZsrCv13QKsxByWFqzDRctTva+O4yqr5j0e5VWB4Dr2tgzVbZuYG5ewg7qywAI/9JD0Cw==
+  dependencies:
+    debug "^4.3.7"
+    jiti "^1.21.6"
+    windicss "^3.5.6"
+
+"@windicss/plugin-utils@1.9.4":
+  version "1.9.4"
+  resolved "https://registry.npmmirror.com/@windicss/plugin-utils/-/plugin-utils-1.9.4.tgz#406a2d0c85b4e73bc774fb6d1d2ad2d22dcf2b65"
+  integrity sha512-GUAX0z+wnq6Rn3+YGJli/keGja73+a6I/PtTpH8EMlNNHrHBbqsbyY5+25QagV39rHwTe/IbkiSdD3csP8L6MA==
+  dependencies:
+    "@antfu/utils" "^0.7.10"
+    "@windicss/config" "1.9.4"
+    debug "^4.3.7"
+    fast-glob "^3.3.2"
+    magic-string "^0.30.14"
+    micromatch "^4.0.8"
+    windicss "^3.5.6"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "http://192.168.0.47:4873/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1707,6 +1739,13 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 browserslist@^4.21.3, browserslist@^4.21.5:
   version "4.21.5"
   resolved "http://192.168.0.47:4873/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
@@ -1901,6 +1940,13 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.7:
+  version "4.4.3"
+  resolved "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "http://192.168.0.47:4873/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -2240,6 +2286,17 @@ fast-glob@^3.2.12, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.8"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "http://192.168.0.47:4873/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -2271,6 +2328,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "http://192.168.0.47:4873/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -2693,6 +2757,11 @@ isexe@^2.0.0:
   resolved "http://192.168.0.47:4873/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.npmmirror.com/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
 js-sdsl@^4.1.4:
   version "4.4.0"
   resolved "http://192.168.0.47:4873/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
@@ -2745,6 +2814,11 @@ jsonc-parser@^3.2.0:
   resolved "http://192.168.0.47:4873/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
   integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
 
+kolorist@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
+  integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
+
 less@^4.1.3:
   version "4.1.3"
   resolved "http://192.168.0.47:4873/less/-/less-4.1.3.tgz#175be9ddcbf9b250173e0a00b4d6920a5b770246"
@@ -2845,6 +2919,13 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
+magic-string@^0.30.14:
+  version "0.30.19"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.19.tgz#cebe9f104e565602e5d2098c5f2e79a77cc86da9"
+  integrity sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "http://192.168.0.47:4873/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -2876,6 +2957,14 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "http://192.168.0.47:4873/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -2936,7 +3025,7 @@ ms@2.1.2:
   resolved "http://192.168.0.47:4873/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
+ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "http://192.168.0.47:4873/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -3770,6 +3859,16 @@ vconsole@^3.15.0:
     core-js "^3.11.0"
     mutation-observer "^1.0.3"
 
+vite-plugin-windicss@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.npmmirror.com/vite-plugin-windicss/-/vite-plugin-windicss-1.9.4.tgz#f88d088de2110a0b7b59965579e8ab44ad678d3d"
+  integrity sha512-3t1AUVrs2XBXGc2BefRPRvy1CLy8qA/5A1J1Z73Ej1DIx+puXn39MQSWluxZ2FHEz8z9OEIvsoIIPc/s/P3OmQ==
+  dependencies:
+    "@windicss/plugin-utils" "1.9.4"
+    debug "^4.3.7"
+    kolorist "^1.8.0"
+    windicss "^3.5.6"
+
 vite@^4.1.4:
   version "4.2.1"
   resolved "http://192.168.0.47:4873/vite/-/vite-4.2.1.tgz#6c2eb337b0dfd80a9ded5922163b94949d7fc254"
@@ -3891,6 +3990,11 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+windicss@^3.5.6:
+  version "3.5.6"
+  resolved "https://registry.npmmirror.com/windicss/-/windicss-3.5.6.tgz#30a34da76894d952a96c9a1921f2e91e13932183"
+  integrity sha512-P1mzPEjgFMZLX0ZqfFht4fhV/FX8DTG7ERG1fBLiWvd34pTLVReS5CVsewKn9PApSgXnVfPWwvq+qUsRwpnwFA==
+
 word-wrap@^1.2.3:
   version "1.2.3"
   resolved "http://192.168.0.47:4873/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"