修改会员中心模块

package.json

@@ -29,6 +29,7 @@
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
     "dayjs": "^1.8.29",
+    "element-ui": "^2.14.1",
     "feather-icons": "^4.28.0",
     "highlight.js": "^10.1.1",
     "js-beautify": "^1.11.0",

src/App.vue

@@ -3,3 +3,8 @@
     <router-view />
   </div>
 </template>
+
+
+<style scoped>
+
+</style>

src/assets/sass/_element.scss

@@ -0,0 +1,5 @@
+.el-progress__text {
+    font-size: 22px !important;
+    font-weight: bold;
+    color: #1890FF;
+  }

src/assets/sass/_search-result.scss

@@ -1,5 +1,7 @@
 .search-result {
     width: 450px;
+    box-sizing: border-box;
+    z-index: 999 !important;
     @apply z-20 absolute right-0 mt-1 invisible opacity-0;
     transition: visibility 0s linear 0.2s, opacity 0.2s 0s;
     &.show {
@@ -9,6 +11,7 @@
             margin-top: -1px;
             .tab-content .tab-content__pane {
                 @apply visible;
+             
             }
         }
     }
@@ -20,3 +23,6 @@
         }
     }
 }
+
+
+

src/assets/sass/app.scss

@@ -1,79 +1,84 @@
 // Breakpoint
 @import 'breakpoint';
 
-// 3rd Parties
-@import '~highlight.js/scss/github';
-@import '~vue-slick-carousel/dist/vue-slick-carousel';
-@import '~vue-slick-carousel/dist/vue-slick-carousel-theme';
-@import '~tail.select/css/default/tail.select-light';
-@import '~toastify-js/src/toastify';
-@import '~dropzone/dist/dropzone';
-@import '~zoom-vanilla.js/dist/zoom';
-@import '~tabulator-tables/dist/css/tabulator';
+// // 3rd Parties
+// @import '~highlight.js/scss/github';
+// @import '~vue-slick-carousel/dist/vue-slick-carousel';
+// @import '~vue-slick-carousel/dist/vue-slick-carousel-theme';
+// @import '~tail.select/css/default/tail.select-light';
+// @import '~toastify-js/src/toastify';
+// @import '~dropzone/dist/dropzone';
+// @import '~zoom-vanilla.js/dist/zoom';
+// @import '~tabulator-tables/dist/css/tabulator';
 
 // Animations
-@import 'typing-dots';
-@import 'zoom-in';
+// @import 'typing-dots';
+// @import 'zoom-in';
 @import 'intro';
 
 // Components
-@import 'top-bar';
-@import 'app';
+// @import 'top-bar';
+
+
+// @import 'app';
 @import 'login';
-@import 'mini-chat-box';
-@import 'mini-chat-list';
-@import 'mini-chat';
-@import 'table';
-@import 'table-report';
-@import 'report-timeline';
-@import 'report-chart';
-@import 'search';
+// @import 'mini-chat-box';
+// @import 'mini-chat-list';
+// @import 'mini-chat';
+// @import 'table';
+// @import 'table-report';
+// @import 'report-timeline';
+// @import 'report-chart';
+// @import 'search';
 @import 'input';
 @import 'button';
-@import 'notification';
-@import 'image-fit';
-@import 'box';
-@import 'report-box';
-@import 'global';
-@import 'content';
-@import 'top-nav';
-@import 'side-nav';
-@import 'breadcrumb';
+// @import 'notification';
+// @import 'image-fit';
+// @import 'box';
+// @import 'report-box';
+// @import 'global';
+// @import 'content';
+// @import 'top-nav';
+// @import 'side-nav';
+// @import 'breadcrumb';
 @import 'tailwind';
-@import 'top-bar-boxed';
-@import 'mobile-menu';
-@import 'pagination';
-@import 'dropdown';
-@import 'modal';
-@import 'tab';
-@import 'checkbox';
-@import 'file';
-@import 'inbox-filter';
-@import 'inbox';
-@import 'scrollbar';
-@import 'chat';
-@import 'boxed-tabs';
-@import 'chat-dropdown';
-@import 'wizard';
-@import 'blog';
-@import 'news';
-@import 'pricing-tabs';
-@import 'accordion';
-@import 'error-page';
-@import 'search-result';
-@import 'mini-report-chart';
-@import 'notification-content';
-@import 'report-maps';
-@import 'pos-dropdown';
-@import 'pos';
-@import 'post';
-@import 'feather-icon';
-@import 'slick';
-@import 'litepicker';
-@import 'tippy';
-@import 'tabulator';
-@import 'tail-select';
-@import 'toastify';
-@import 'dropzone';
-@import 'ckeditor';
-@import 'zoom-vanilla';
+
+
+
+// @import 'top-bar-boxed';
+// @import 'mobile-menu';
+// @import 'pagination';
+// @import 'dropdown';
+// @import 'modal';
+// @import 'tab';
+// @import 'checkbox';
+// @import 'file';
+// @import 'inbox-filter';
+// @import 'inbox';
+// @import 'scrollbar';
+// @import 'chat';
+// @import 'boxed-tabs';
+// @import 'chat-dropdown';
+// @import 'wizard';
+// @import 'blog';
+// @import 'news';
+// @import 'pricing-tabs';
+// @import 'accordion';
+// @import 'error-page';
+// @import 'search-result';
+// @import 'mini-report-chart';
+// @import 'notification-content';
+// @import 'report-maps';
+// @import 'pos-dropdown';
+// @import 'pos';
+// @import 'post';
+// @import 'feather-icon';
+// @import 'slick';
+// @import 'litepicker';
+// @import 'tippy';
+// @import 'tabulator';
+// @import 'tail-select';
+// @import 'toastify';
+// @import 'dropzone';
+// @import 'ckeditor';
+// @import 'zoom-vanilla';

src/assets/sass/app2.scss

@@ -0,0 +1,89 @@
+// Breakpoint
+@import 'breakpoint';
+
+// // 3rd Parties
+// @import '~highlight.js/scss/github';
+// @import '~vue-slick-carousel/dist/vue-slick-carousel';
+// @import '~vue-slick-carousel/dist/vue-slick-carousel-theme';
+// @import '~tail.select/css/default/tail.select-light';
+// @import '~toastify-js/src/toastify';
+// @import '~dropzone/dist/dropzone';
+// @import '~zoom-vanilla.js/dist/zoom';
+// @import '~tabulator-tables/dist/css/tabulator';
+
+// Animations
+// @import 'typing-dots';
+// @import 'zoom-in';
+@import 'intro';
+
+// Components
+// @import 'top-bar';
+
+
+@import 'app';
+@import 'login';
+@import 'mini-chat-box';
+@import 'mini-chat-list';
+@import 'mini-chat';
+@import 'table';
+@import 'table-report';
+@import 'report-timeline';
+@import 'report-chart';
+@import 'search';
+@import 'input';
+@import 'button';
+@import 'notification';
+@import 'image-fit';
+@import 'box';
+@import 'report-box';
+@import 'global';
+@import 'content';
+@import 'top-nav';
+@import 'side-nav';
+@import 'breadcrumb';
+@import 'tailwind';
+
+
+
+@import 'top-bar-boxed';
+@import 'mobile-menu';
+@import 'pagination';
+@import 'dropdown';
+@import 'modal';
+@import 'tab';
+@import 'checkbox';
+@import 'file';
+@import 'inbox-filter';
+@import 'inbox';
+@import 'scrollbar';
+@import 'chat';
+@import 'boxed-tabs';
+@import 'chat-dropdown';
+@import 'wizard';
+@import 'blog';
+@import 'news';
+@import 'pricing-tabs';
+@import 'accordion';
+@import 'error-page';
+@import 'search-result';
+@import 'mini-report-chart';
+@import 'notification-content';
+@import 'report-maps';
+@import 'pos-dropdown';
+@import 'pos';
+@import 'post';
+@import 'feather-icon';
+@import 'slick';
+@import 'litepicker';
+@import 'tippy';
+@import 'tabulator';
+@import 'tail-select';
+@import 'toastify';
+@import 'dropzone';
+@import 'ckeditor';
+@import 'zoom-vanilla';
+
+
+
+// 饿了么css
+@import 'element'

src/components/TopBar.vue

@@ -1,15 +1,119 @@
 <template>
   <!-- BEGIN: Top Bar -->
-  <div class="top-bar">
+  <div class="top-bar p-5" style="height:80px;border-bottom:1px solid rgba(0,0,0,0.2);z-index:99;position: relative;">
     <!-- BEGIN: Breadcrumb -->
-    <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
+    <div class="-intro-x breadcrumb mr-auto hidden sm:flex" style="float:left;margin-top: 10px;">
       <div>智莺生活</div>
       <ChevronRightIcon class="breadcrumb__icon" />
       <div class="breadcrumb--active">{{ this.$route.meta.title }}</div>
     </div>
+
+
+
+        <!-- END: Notifications -->
+    <!-- BEGIN: Account Menu -->
+    <div class="intro-x dropdown w-8 h-8 relative" style="float:right">
+      <div
+        class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in"
+      >
+        <img
+          alt=""
+          :src="require(`@/assets/images/${$f()[9].photos[0]}`)"
+        />
+      </div>
+      <div class="dropdown-box w-56">
+        <div
+          class="dropdown-box__content box bg-theme-38 text-white"
+        >
+          <div class="p-4 border-b border-theme-40">
+            <div class="font-medium">USERNAME</div>
+            <div class="text-xs text-theme-41">会员ID：1231451565</div>
+          </div>
+          <div class="p-2">
+            <a
+              href
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
+            >
+              <UserIcon class="w-4 h-4 mr-2" /> 个人资料
+            </a>
+       
+            <a
+              href
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
+            >
+              <LockIcon class="w-4 h-4 mr-2" />修改密码
+            </a>
+            <a
+              href
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
+            >
+              <HelpCircleIcon class="w-4 h-4 mr-2" />帮助
+            </a>
+          </div>
+          <div class="p-2 border-t border-theme-40">
+            <a
+              href
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
+            >
+              <ToggleRightIcon class="w-4 h-4 mr-2" />
+             退出登陆
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+        <!-- END: Search -->
+    <!-- BEGIN: Notifications -->
+    <div class="intro-x dropdown relative mr-auto sm:mr-6" style="float:right;margin:13px 23px 0 0">
+      <div
+        class="dropdown-toggle notification notification--bullet cursor-pointer"
+      >
+        <BellIcon class="notification__icon" style="margin-top:-3px" />
+      </div>
+      <div class="notification-content pt-2 dropdown-box">
+        <div
+          class="notification-content__box dropdown-box__content box"
+        >
+          <div class="notification-content__title">Notifications</div>
+          <div
+            v-for="(faker, fakerKey) in $_.take($f(), 5)"
+            :key="fakerKey"
+            class="cursor-pointer relative flex items-center"
+            :class="{ 'mt-5': fakerKey }"
+          >
+            <div class="w-12 h-12 flex-none image-fit mr-1">
+              <img
+                alt=""
+                class="rounded-full"
+                :src="require(`@/assets/images/${faker.photos[0]}`)"
+              />
+              <div
+                class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
+              ></div>
+            </div>
+            <div class="ml-2 overflow-hidden">
+              <div class="flex items-center">
+                <a href="javascript:;" class="font-medium truncate mr-5">
+                  {{ faker.users[0].name }}
+                </a>
+                <div class="text-xs text-gray-500 ml-auto whitespace-no-wrap">
+                  {{ faker.times[0] }}
+                </div>
+              </div>
+              <div class="w-full truncate text-gray-600">
+                {{ faker.news[0].short_content }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    
     <!-- END: Breadcrumb -->
     <!-- BEGIN: Search -->
-    <div class="intro-x relative mr-3 sm:mr-6">
+    <div class="intro-x relative mr-3 sm:mr-6 "  style="float:right">
       <div class="search hidden sm:block">
         <input
           type="text"
@@ -20,11 +124,12 @@
         />
         <SearchIcon class="search__icon" />
       </div>
-      <a class="notification sm:hidden" href>
-        <SearchIcon class="notification__icon" />
+      <a class="notification sm:hidden"  href>
+        <SearchIcon class="notification__icon" style="margin-top:8px" />
       </a>
       <div class="search-result" :class="{ show: searchDropdown }">
-        <div class="search-result__content">
+ 
+    <div class="search-result__content">
           <div class="search-result__content__title">Pages</div>
           <div class="mb-5">
             <a href class="flex items-center">
@@ -94,114 +199,12 @@
               {{ faker.products[0].category }}
             </div>
           </a>
-        </div>
-      </div>
-    </div>
-    <!-- END: Search -->
-    <!-- BEGIN: Notifications -->
-    <div class="intro-x dropdown relative mr-auto sm:mr-6">
-      <div
-        class="dropdown-toggle notification notification--bullet cursor-pointer"
-      >
-        <BellIcon class="notification__icon" />
-      </div>
-      <div class="notification-content pt-2 dropdown-box">
-        <div
-          class="notification-content__box dropdown-box__content box"
-        >
-          <div class="notification-content__title">Notifications</div>
-          <div
-            v-for="(faker, fakerKey) in $_.take($f(), 5)"
-            :key="fakerKey"
-            class="cursor-pointer relative flex items-center"
-            :class="{ 'mt-5': fakerKey }"
-          >
-            <div class="w-12 h-12 flex-none image-fit mr-1">
-              <img
-                alt=""
-                class="rounded-full"
-                :src="require(`@/assets/images/${faker.photos[0]}`)"
-              />
-              <div
-                class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
-              ></div>
-            </div>
-            <div class="ml-2 overflow-hidden">
-              <div class="flex items-center">
-                <a href="javascript:;" class="font-medium truncate mr-5">
-                  {{ faker.users[0].name }}
-                </a>
-                <div class="text-xs text-gray-500 ml-auto whitespace-no-wrap">
-                  {{ faker.times[0] }}
-                </div>
-              </div>
-              <div class="w-full truncate text-gray-600">
-                {{ faker.news[0].short_content }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- END: Notifications -->
-    <!-- BEGIN: Account Menu -->
-    <div class="intro-x dropdown w-8 h-8 relative">
-      <div
-        class="dropdown-toggle w-8 h-8 rounded-full overflow-hidden shadow-lg image-fit zoom-in"
-      >
-        <img
-          alt=""
-          :src="require(`@/assets/images/${$f()[9].photos[0]}`)"
-        />
-      </div>
-      <div class="dropdown-box w-56">
-        <div
-          class="dropdown-box__content box bg-theme-38 text-white"
-        >
-          <div class="p-4 border-b border-theme-40">
-            <div class="font-medium">{{ $f()[0].users[0].name }}</div>
-            <div class="text-xs text-theme-41">
-              {{ $f()[0].jobs[0] }}
-            </div>
-          </div>
-          <div class="p-2">
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
-            >
-              <UserIcon class="w-4 h-4 mr-2" /> Profile
-            </a>
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
-            >
-              <EditIcon class="w-4 h-4 mr-2" /> Add Account
-            </a>
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
-            >
-              <LockIcon class="w-4 h-4 mr-2" /> errerrrReset Password
-            </a>
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
-            >
-              <HelpCircleIcon class="w-4 h-4 mr-2" /> Help
-            </a>
-          </div>
-          <div class="p-2 border-t border-theme-40">
-            <a
-              href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
-            >
-              <ToggleRightIcon class="w-4 h-4 mr-2" />
-              Logout
-            </a>
-          </div>
-        </div>
+        </div> 
       </div>
+
     </div>
+
+
     <!-- END: Account Menu -->
   </div>
   <!-- END: Top Bar -->
@@ -224,3 +227,11 @@ export default {
   }
 };
 </script>
+
+
+<style scoped>
+
+ 
+
+
+</style>

src/main.js

@@ -2,12 +2,24 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+
+
 import "./components/global";
 import "./utils";
 import "./libs";
 
+
+
 // Midone Theme
-import "./assets/sass/app.scss";
+import "./assets/sass/app2.scss";
+
+ 
+ 
+
 
 Vue.config.productionTip = false;
 

src/modules/Crad.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="card_body intro-x">
+    <div class="card_header">
+      <div class="img-box">
+        <div class="LeftPng">
+          <img src="@/assets/images/niao.png" alt="" />
+        </div>
+        <span> 嗨如意</span>
+      </div>
+      <div class="cardRihgt">
+        <div class="icon-box">
+          <i class="el-icon-more" style="font-size: 20px; color: #bbc6da"></i>
+        </div>
+      </div>
+      <div class="cardRight2">
+        <img :src="CardData.img" alt="" />
+        <span>11个模块</span>
+      </div>
+    </div>
+    <div class="cardListText">
+      <ul>
+        <li>
+          <span class="leftText">版本信息</span>
+          <span class="rightText">授信版本</span>
+        </li>
+        <li>
+          <span class="leftText">APPKEY</span>
+          <span class="rightText">21524564545</span>
+        </li>
+        <li>
+          <span class="leftText">到期时间</span>
+          <span class="rightText">2021-01-10</span>
+        </li>
+      </ul>
+    </div>
+    <div class="cardButtom">查看详情</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["CardData"],
+  data() {
+    return {};
+  },
+  created() {},
+};
+</script>
+
+<style scoped>
+.card_body {
+  float: left;
+  width: 31.2%;
+  /* width: 372px; */
+  min-width: 310px;
+  background: #fff;
+  height: 328px;
+  margin: 0 2% 20px 0;
+  border-radius: 8%;
+  box-sizing: border-box;
+  padding: 24px;
+}
+
+.card_body:hover {
+  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* .card_body:nth-child(3n + 5) {
+  margin-right: 0;
+} */
+
+.card_header {
+  width: 100%;
+  font-size: 26px;
+  color: #333333;
+  overflow: hidden;
+  margin-bottom: 5px;
+}
+
+.img-box {
+  width: 90px;
+  float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.LeftPng {
+  width: 75px;
+  height: 75px;
+  border-right: 16px;
+  overflow: hidden;
+  border-radius: 23px;
+}
+
+.LeftPng > img {
+  height: 75px;
+  width: 75px;
+  vertical-align: middle;
+}
+
+.cardRihgt {
+  float: right;
+}
+
+.icon-box {
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  line-height: 26px;
+  border: 1px solid #bbc6da;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.cardRight2 {
+  width: 105px;
+  height: 32px;
+  background: #ffffff;
+  border: 1px solid #bbc6da;
+  border-radius: 16px;
+  float: right;
+  margin-right: 10px;
+  color: #bbc6da;
+  font-size: 12px;
+  line-height: 32px;
+  font-weight: 400;
+  position: relative;
+  text-indent: 40px;
+}
+
+.cardRight2 > img {
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+  position: absolute;
+  left: -1px;
+  top: -1px;
+}
+
+.cardListText,
+ul,
+li {
+  overflow: hidden;
+  width: 100%;
+}
+
+.cardListText li {
+  line-height: 28px;
+}
+
+.leftText {
+  float: left;
+  color: #999999;
+  font-size: 16px;
+}
+.rightText {
+  float: right;
+  color: #333333;
+  font-size: 16px;
+}
+
+.cardButtom {
+  background: #f7f7fa;
+  width: 100%;
+  height: 56px;
+  box-sizing: border-box;
+  border-radius: 22px;
+  text-align: center;
+  line-height: 56px;
+  color: #8f9cc6;
+  font-size: 16px;
+  margin-top: 30px;
+}
+
+.cardButtom:hover {
+  background: #1890fa;
+  color: #fff;
+  cursor: pointer;
+}
+
+.cardButtom:active {
+  background: #58b0fd;
+}
+</style>

src/router/index.js

@@ -6,10 +6,16 @@ Vue.use(VueRouter);
 const routes = [
 	{
 		path: '/',
+		name: 'login',
+		meta: { title: '用户登录' },
+		component: () => import('@/views/Login')
+	},
+	{
+		path: '/Dashboard',
 		component: () => import(/* webpackChunkName: 'main' */ '@/layouts/SideMenu'),
 		children: [
 			{
-				path: '/',
+				path: '/Dashboard',
 				name: 'side-menu-dashboard',
 				meta: {title: '会员中心'},
 				component: () => import('@/views/Dashboard')
@@ -344,12 +350,6 @@ const routes = [
 		meta: {title: '管理中心'},
 		component: () => import('@/views/Inbox')
 	},
-	{
-		path: '/login',
-		name: 'login',
-		meta: {title: '管理中心'},
-		component: () => import('@/views/Login')
-	},
 	{
 		path: '/register',
 		name: 'register',
@@ -381,9 +381,10 @@ const router = new VueRouter({
 		}
 	}
 });
+
 router.beforeEach((to, from, next) => {
 	document.title = to.meta.title ? to.meta.title + ' - ZhiOS智莺' : 'ZhiOS智莺'
 	next()
-})
+  })
 
 export default router;

src/utils/faker.js

@@ -49,14 +49,18 @@ export default {
       fakePhotos() {
         let photos = [];
         for (let i = 0; i < 15; i++) {
-          photos[photos.length] = "profile-" + _.random(1, 15) + ".jpg";
+          // photos[photos.length] = "profile-" + _.random(1, 15) + ".jpg";
+          photos[photos.length] = "profile-1.jpg";
+
         }
         return _.sampleSize(photos, 10);
       },
       fakeImages() {
         let images = [];
         for (let i = 0; i < 15; i++) {
-          images[images.length] = "preview-" + _.random(1, 15) + ".jpg";
+          images[images.length] = "preview-1.jpg";
+          
+          // images[images.length] = "preview-" + _.random(1, 15) + ".jpg";
         }
         return _.sampleSize(images, 10);
       },
@@ -234,30 +238,30 @@ export default {
       fakeFoods() {
         let foods = [
           { name: "Vanilla Latte", image: "food-beverage-1.jpg" },
-          { name: "Milkshake", image: "food-beverage-2.jpg" },
-          { name: "Soft Drink", image: "food-beverage-3.jpg" },
-          { name: "Root Beer", image: "food-beverage-4.jpg" },
-          { name: "Pocari", image: "food-beverage-5.jpg" },
-          { name: "Ultimate Burger", image: "food-beverage-6.jpg" },
-          { name: "Hotdog", image: "food-beverage-7.jpg" },
-          { name: "Avocado Burger", image: "food-beverage-8.jpg" },
+          { name: "Milkshake", image: "food-beverage-1.jpg" },
+          { name: "Soft Drink", image: "food-beverage-1.jpg" },
+          { name: "Root Beer", image: "food-beverage-1.jpg" },
+          { name: "Pocari", image: "food-beverage-1.jpg" },
+          { name: "Ultimate Burger", image: "food-beverage-1.jpg" },
+          { name: "Hotdog", image: "food-beverage-1.jpg" },
+          { name: "Avocado Burger", image: "food-beverage-1.jpg" },
           {
             name: "Spaghetti Fettucine Aglio with Beef Bacon",
-            image: "food-beverage-9.jpg"
+            image: "food-beverage-1.jpg"
           },
           {
             name: "Spaghetti Fettucine Aglio with Smoked Salmon",
-            image: "food-beverage-10.jpg"
+            image: "food-beverage-1.jpg"
           },
-          { name: "Curry Penne and Cheese", image: "food-beverage-11.jpg" },
-          { name: "French Fries", image: "food-beverage-12.jpg" },
-          { name: "Virginia Cheese Fries", image: "food-beverage-13.jpg" },
-          { name: "Virginia Cheese Wedges", image: "food-beverage-14.jpg" },
-          { name: "Fried/Grilled Banana", image: "food-beverage-15.jpg" },
-          { name: "Crispy Mushroom", image: "food-beverage-16.jpg" },
-          { name: "Fried Calamari", image: "food-beverage-17.jpg" },
-          { name: "Chicken Wings", image: "food-beverage-18.jpg" },
-          { name: "Snack Platter", image: "food-beverage-19.jpg" }
+          { name: "Curry Penne and Cheese", image: "food-beverage-1.jpg" },
+          { name: "French Fries", image: "food-beverage-1.jpg" },
+          { name: "Virginia Cheese Fries", image: "food-beverage-1.jpg" },
+          { name: "Virginia Cheese Wedges", image: "food-beverage-1.jpg" },
+          { name: "Fried/Grilled Banana", image: "food-beverage-1.jpg" },
+          { name: "Crispy Mushroom", image: "food-beverage-1.jpg" },
+          { name: "Fried Calamari", image: "food-beverage-1.jpg" },
+          { name: "Chicken Wings", image: "food-beverage-1.jpg" },
+          { name: "Snack Platter", image: "food-beverage-1.jpg" }
         ];
         return _.shuffle(foods);
       }

src/views/Login.vue

@@ -58,9 +58,7 @@
                 placeholder="Password"
               />
             </div>
-            <div
-              class="intro-x flex text-gray-700 text-xs sm:text-sm mt-4"
-            >
+            <div class="intro-x flex text-gray-700 text-xs sm:text-sm mt-4">
               <div class="flex items-center mr-auto">
                 <input
                   id="remember-me"
@@ -76,26 +74,24 @@
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
               <button
                 class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3 align-top"
+                @click="getLogin"
               >
-                Login
+                登录
               </button>
               <button
                 class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
+                @click="getSignUp "
               >
-                Sign up
+                注册
               </button>
             </div>
             <div
               class="intro-x mt-10 xl:mt-24 text-gray-700 text-center xl:text-left"
             >
               By signin up, you agree to our <br />
-              <a class="text-theme-1" href=""
-                >Terms and Conditions</a
-              >
+              <a class="text-theme-1" href="">Terms and Conditions</a>
               &
-              <a class="text-theme-1" href=""
-                >Privacy Policy</a
-              >
+              <a class="text-theme-1" href="">Privacy Policy</a>
             </div>
           </div>
         </div>
@@ -108,9 +104,33 @@
 <script>
 export default {
   mounted() {
-    cash("body")
-      .removeClass('app')
-      .addClass('login');
-  }
+    cash("body").removeClass("app").addClass("login");
+    // setTimeout(()=>{
+    //   import("../components/global");
+    //   import("../utils");
+    //   import("../assets/sass/app2.scss")
+    // },3000)
+
+
+  },
+  methods: {
+    getLogin: function () {
+      this.$router.push("/Dashboard");
+    },
+
+    getSignUp: function(){
+      this.$router.push('/register')
+    }
+  },
 };
+
+ 
 </script>
+
+<style lang="scss" scoped>
+
+ 
+</style>
+ 
+
+

src/views/Profile.vue

@@ -955,6 +955,7 @@
             </div>
             <div class="report-chart mt-8">
               <ReportLineChart :height="290" />
+              
             </div>
           </div>
         </div>
@@ -973,6 +974,9 @@ export default {
     ReportLineChart,
     VueSlickCarousel
   },
+  mounted(){
+    console.log(this)
+  },
   methods: {
     prevAnnouncement() {
       this.$refs["announcement"].prev();

src/views/Register.vue

@@ -107,12 +107,13 @@
               <button
                 class="button button--lg w-full xl:w-32 text-white bg-theme-1 xl:mr-3 align-top"
               >
-                Register
+                注册
               </button>
               <button
                 class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
+                @click="getSignUp"
               >
-                Sign in
+                登录
               </button>
             </div>
           </div>
@@ -129,6 +130,11 @@ export default {
     cash("body")
       .removeClass("app")
       .addClass("login");
+  },
+  methods: {
+    getSignUp:function(){
+      this.$router.push('/')
+    }
   }
 };
 </script>

tailwind.config.js

@@ -46,8 +46,8 @@ module.exports = {
           35: "#0077b5",
           36: "#d18d96",
           37: "#c7d2ff",
-          38: "#15329A",
-          40: "#203FAD",
+          38: "#1890FF",
+          40: "#1890FF",
           41: "#BBC8FD"
         },
         dark: {