update

src/views/index.vue

@@ -11,39 +11,27 @@
 <template>
   <div :class="$style['container']" ref="appRef">
     <div class="navbar">
-      <el-dropdown @command="changelang" >
+      <h2 class="title">大屏管理系统</h2>
+      <div class="dropdown">
+        <el-dropdown @command="changelang">
           <span class="el-dropdown-link">
             <!-- <img src="../assets/svg/gateway.svg" alt="" class="langimg" height="20px" width="20px"> -->
             <i class="iconfont icon-zhongyingwen langimg"></i>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
-        <el-dropdown-item :class="'简体中文' == lang?'select':'' " command="简体中文">简体中文</el-dropdown-item>
+              <el-dropdown-item :class="'简体中文' == lang ? 'select' : ''" command="简体中文">简体中文</el-dropdown-item>
-        <el-dropdown-item :class="'English/USD' == lang?'select':'' " command="English/USD">English</el-dropdown-item>
+              <el-dropdown-item :class="'English/USD' == lang ? 'select' : ''"
+                command="English/USD">English</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-      <!-- <el-select class="m-2" v-model="lang"  placeholder="Select" size="large" @change="changelang">
+      </div>
-        <el-option
-          :label="'简体中文'"
-          :value="'简体中文'"
-        />
-        <el-option
-          :label="'English/USD'"
-          :value="'English/USD'"
-        />
-      </el-select> -->
     </div>
 
     <div class="itemlist">
-      <list
+      <list v-for="res in routerList" :path="res.path" :is-link="res.isLink" :title="res.title" :key="res.id"
-        v-for="res in routerList"
+        :url="res.url"></list>
-        :path="res.path"
-        :is-link="res.isLink"
-        :title="res.title"
-        :key="res.id"
-        :url="res.url"
-      ></list>
     </div>
   </div>
 </template>
@@ -53,7 +41,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import list from "@/components/assembly/indexList.vue";
 import { useI18n } from "vue-i18n";
 import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
-let langicon=require("@/assets/svg/language.svg")
+let langicon = require("@/assets/svg/language.svg")
 window.document.title = "大屏物联管理系统";
 let { t } = useI18n();
 let routerList = [
@@ -299,14 +287,14 @@ let routerList = [
     url: require("../assets/indexImg/intelligentShelves.png"),
   },
 ];
-let lang=ref(getStoredLanguage()||'简体中文')
+let lang = ref(getStoredLanguage() || '简体中文')
-function changelang(val){
+function changelang(val) {
 
-saveStoredLanguage(val)
+  saveStoredLanguage(val)
-location.reload()
+  location.reload()
 }
-onMounted(() => {});
+onMounted(() => { });
-onUnmounted(() => {});
+onUnmounted(() => { });
 </script>
 
 <style module>
@@ -317,12 +305,14 @@ onUnmounted(() => {});
 </style>
 <style scoped>
 @import '../assets/css/iconfont.css';
-.langimg{
+
+.langimg {
   width: 50px;
   height: 50px;
   font-size: 50px;
   color: #fff;
 }
+
 .itemlist {
   height: 1030px;
   width: 1920px;
@@ -334,16 +324,31 @@ onUnmounted(() => {});
   flex-wrap: wrap;
   overflow: auto !important;
 }
+
 .navbar {
+  position: relative;
   height: 50px;
   font-size: 20px;
-  width: 100%;
+  margin: 20px;
-  margin: 10px;
+  margin-top: 40px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
-  margin-left: -100px;
 }
+
+.title {
+  font-size: 40px;
+  text-align: center;
+  font-weight: bold;
+  color: white;
+}
+
+.dropdown {
+  position: absolute;
+  top: 0;
+  right: 90px;
+}
+
 .el-dropdown-link {
   font-size: 30px;
   color: #fff;
@@ -353,13 +358,16 @@ onUnmounted(() => {});
   background-color: #303133 !important;
   color: #fff;
 }
-.el-dropdown-menu__item{
+
+.el-dropdown-menu__item {
   color: #fff !important;
 }
+
 .el-popper.is-light .el-popper__arrow::before {
   background-color: #303133 !important;
   color: #fff;
 }
+
 :deep(.select) {
   background-color: #e4f5f5 !important;
   color: #409EFF !important;