From d6fa79bb4cc3083f3a453c08a7a9740a8b5f7d4a Mon Sep 17 00:00:00 2001
From: Qing <landaiqing@126.com>
Date: Wed, 20 Dec 2023 00:38:52 +0800
Subject: [PATCH] Optimized routing structure

---
 src/components/Home/ContentWrapper.vue |  35 ----
 src/components/Home/HomeHeader.vue     |   4 +-
 src/components/Home/HomePage.vue       | 256 +++++++++++++++++++++++--
 src/components/Home/MainContainer.vue  | 251 ------------------------
 src/components/HotNews/HotNews.vue     |  27 +++
 src/router/index.js                    |  10 +-
 src/views/Index.vue                    |  11 +-
 7 files changed, 280 insertions(+), 314 deletions(-)
 delete mode 100644 src/components/Home/ContentWrapper.vue
 delete mode 100644 src/components/Home/MainContainer.vue
 create mode 100644 src/components/HotNews/HotNews.vue

diff --git a/src/components/Home/ContentWrapper.vue b/src/components/Home/ContentWrapper.vue
deleted file mode 100644
index dcaa51c..0000000
--- a/src/components/Home/ContentWrapper.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="wrapper">
-    <LeftSide></LeftSide>
-    <MainContainer></MainContainer>
-  </div>
-</template>
-
-<script>
-import LeftSide from "@/components/Home/LeftSide.vue";
-import MainContainer from "@/components/Home/MainContainer.vue";
-export default {
-  name:"ContentWrapper",
-  components:{
-    LeftSide,
-    MainContainer
-  },
-  data() {
-    return {
-
-    }},
-  mounted() {
-
-  },
-  created() {
-
-  },
-  computed: {
-
-  },
-  methods: {
-
-  }
-
-}
-</script>
\ No newline at end of file
diff --git a/src/components/Home/HomeHeader.vue b/src/components/Home/HomeHeader.vue
index 9f66c7b..75f1c03 100644
--- a/src/components/Home/HomeHeader.vue
+++ b/src/components/Home/HomeHeader.vue
@@ -2,8 +2,8 @@
   <div class="header">
     <div class="menu-circle"></div>
     <div class="header-menu">
-      <a class="menu-link is-active"   href="#">Apps</a>
-      <a class="menu-link notify" href="#">Your work</a>
+      <router-link to="/home"><a class="menu-link is-active" >ALL</a></router-link>
+      <router-link to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>
       <a class="menu-link" href="#">Discover</a>
       <a class="menu-link notify" href="#">Market</a>
     </div>
diff --git a/src/components/Home/HomePage.vue b/src/components/Home/HomePage.vue
index 8e76dd2..0952466 100644
--- a/src/components/Home/HomePage.vue
+++ b/src/components/Home/HomePage.vue
@@ -1,37 +1,251 @@
 <template>
-  <div class="wrapper">
-    <LeftSide></LeftSide>
-    <MainContainer></MainContainer>
+  <div class="main-container">
+    <!--    <MainHeader></MainHeader>-->
+    <div class="content-wrapper">
+      <div class="content-wrapper-header">
+        <div class="content-wrapper-context">
+          <h3 class="img-content">
+            <svg viewBox="0 0 512 512">
+              <path d="M467 0H45C20.099 0 0 20.099 0 45v422c0 24.901 20.099 45 45 45h422c24.901 0 45-20.099 45-45V45c0-24.901-20.099-45-45-45z" fill="#d6355b" data-original="#ff468c"></path>
+              <path xmlns="http://www.w3.org/2000/svg" d="M512 45v422c0 24.901-20.099 45-45 45H256V0h211c24.901 0 45 20.099 45 45z" fill="#d6355b" data-original="#d72878"></path>
+              <path xmlns="http://www.w3.org/2000/svg" d="M467 30H45c-8.401 0-15 6.599-15 15v422c0 8.401 6.599 15 15 15h422c8.401 0 15-6.599 15-15V45c0-8.401-6.599-15-15-15z" fill="#2e000a" data-original="#700029"></path>
+              <path xmlns="http://www.w3.org/2000/svg" d="M482 45v422c0 8.401-6.599 15-15 15H256V30h211c8.401 0 15 6.599 15 15z" fill="#2e000a" data-original="#4d0e06"></path>
+              <path xmlns="http://www.w3.org/2000/svg" d="M181 391c-41.353 0-75-33.647-75-75 0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45c41.353 0 75 33.647 75 75s-33.647 75-75 75z" fill="#d6355b" data-original="#ff468c"></path>
+              <path xmlns="http://www.w3.org/2000/svg" d="M391 361h-30c-8.276 0-15-6.724-15-15V211h45c8.291 0 15-6.709 15-15s-6.709-15-15-15h-45v-45c0-8.291-6.709-15-15-15s-15 6.709-15 15v45h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h15v135c0 24.814 20.186 45 45 45h30c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#d6355b" data-original="#d72878"></path>
+            </svg>
+            Adobe Stock
+          </h3>
+          <div class="content-text">Grab yourself 10 free images from Adobe Stock in a 30-day free trial plan and find perfect image, that will help you with your new project.</div>
+          <button class="content-button">Start free trial</button>
+        </div>
+        <img class="content-wrapper-img" src="https://assets.codepen.io/3364143/glass.png" alt="">
+      </div>
+      <div class="content-section">
+        <div class="content-section-title">Installed</div>
+        <ul>
+          <li class="adobe-product">
+            <div class="products">
+              <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687"></path>
+                  <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff"></path>
+                </g>
+              </svg>
+              Photoshop
+            </div>
+            <span class="status">
+          <span class="status-circle green"></span>
+          Updated</span>
+            <div class="button-wrapper">
+              <button class="content-button status-button open">Open</button>
+              <div class="menu">
+                <button class="dropdown">
+                  <ul>
+                    <li><a href="#">Go to Discover</a></li>
+                    <li><a href="#">Learn more</a></li>
+                    <li><a href="#">Uninstall</a></li>
+                  </ul>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="adobe-product">
+            <div class="products">
+              <svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13"></path>
+                  <path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e"></path>
+                </g>
+              </svg>
+              Illustrator
+            </div>
+
+            <span class="status">
+          <span class="status-circle"></span>
+          Update Available</span>
+            <div class="button-wrapper">
+              <button class="content-button status-button">Update this app</button>
+              <div class="pop-up">
+                <div class="pop-up__title">Update This App
+                  <svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <path d="M15 9l-6 6M9 9l6 6"></path>
+                  </svg>
+                </div>
+                <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
+                <div class="checkbox-wrapper">
+                  <input type="checkbox" id="check1" class="checkbox">
+                  <label for="check1">Import previous settings and preferences</label>
+                </div>
+                <div class="checkbox-wrapper">
+                  <input type="checkbox" id="check2" class="checkbox">
+                  <label for="check2">Remove old versions</label>
+                </div>
+                <div class="content-button-wrapper">
+                  <button class="content-button status-button open close">Cancel</button>
+                  <button class="content-button status-button">Continue</button>
+                </div>
+              </div>
+              <div class="menu">
+                <button class="dropdown">
+                  <ul>
+                    <li><a href="#">Go to Discover</a></li>
+                    <li><a href="#">Learn more</a></li>
+                    <li><a href="#">Uninstall</a></li>
+                  </ul>
+                </button>
+              </div>
+            </div>
+          </li>
+          <li class="adobe-product">
+            <div class="products">
+              <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+                <g xmlns="http://www.w3.org/2000/svg">
+                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
+                  <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
+                </g>
+              </svg>
+              After Effects
+            </div>
+            <span class="status">
+          <span class="status-circle green"></span>
+          Updated</span>
+            <div class="button-wrapper">
+              <button class="content-button status-button open">Open</button>
+              <div class="menu">
+                <button class="dropdown">
+                  <ul>
+                    <li><a href="#">Go to Discover</a></li>
+                    <li><a href="#">Learn more</a></li>
+                    <li><a href="#">Uninstall</a></li>
+                  </ul>
+                </button>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-section">
+        <div class="content-section-title">Apps in your plan</div>
+        <div class="apps-card">
+          <div class="app-card">
+         <span>
+          <svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
+           <path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
+           <g xmlns="http://www.w3.org/2000/svg">
+            <path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
+           </g>
+          </svg>
+          Premiere Pro
+         </span>
+            <div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
+            <div class="app-card-buttons">
+              <button class="content-button status-button">Update</button>
+              <div class="menu"></div>
+            </div>
+          </div>
+          <div class="app-card">
+         <span>
+          <svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
+           <g xmlns="http://www.w3.org/2000/svg">
+            <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
+            <path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
+           </g>
+          </svg>
+          InDesign
+         </span>
+            <div class="app-card__subtext">Design and publish great projects &amp; mockups</div>
+            <div class="app-card-buttons">
+              <button class="content-button status-button">Update</button>
+              <div class="menu"></div>
+            </div>
+          </div>
+          <div class="app-card">
+         <span>
+          <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
+           <g xmlns="http://www.w3.org/2000/svg">
+            <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
+            <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
+           </g>
+          </svg>
+          After Effects
+         </span>
+            <div class="app-card__subtext">Industry Standart motion graphics &amp; visual effects</div>
+            <div class="app-card-buttons">
+              <button class="content-button status-button">Update</button>
+              <div class="menu"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
 <script>
-import MainContainer from "@/components/Home/MainContainer.vue";
-import LeftSide from "@/components/Home/LeftSide.vue";
-
+import $ from 'jquery'
+// import MainHeader from "@/components/Home/MainHeader.vue";
 export default {
-  name: "HomePage",
-  components: {
-    LeftSide, MainContainer
-
+  name:"MainContainer",
+  components:{
+    // MainHeader
   },
   data() {
-    return {}
-  },
-  mounted() {
+    return {
 
+    }},
+  mounted() {
+    this.Fun1();
+    this.Fun2();
+    this.Fun3();
+    this.Fun4();
+    this.dropdownFun();
   },
   created() {
 
   },
-  computed: {},
-  methods: {
+  computed: {
 
+  },
+  methods: {
+    Fun1(){
+      $(document).click(function (e) {
+        var container = $(".status-button");
+        var dd = $(".dropdown");
+        if (!container.is(e.target) && container.has(e.target).length === 0) {
+          dd.removeClass("is-active");
+        }
+      });
+    },
+    Fun2(){
+      $(".status-button:not(.open)").on("click", function () {
+        $(".overlay-app").addClass("is-active");
+      });
+      $(".pop-up .close").click(function () {
+        $(".overlay-app").removeClass("is-active");
+      });
+    },
+    Fun3(){
+      $(".status-button:not(.open)").click(function () {
+        $(".pop-up").addClass("visible");
+      });
+    },
+    Fun4(){
+      $(".pop-up .close").click(function () {
+        $(".pop-up").removeClass("visible");
+      });
+    },
+    dropdownFun(){
+      const dropdowns = document.querySelectorAll(".dropdown");
+      dropdowns.forEach(dropdown => {
+        dropdown.addEventListener("click", e => {
+          e.stopPropagation();
+          dropdowns.forEach(c => c.classList.remove("is-active"));
+          dropdown.classList.add("is-active");
+        });
+      });
+    }
   }
 
 }
-</script>
-
-
-
-
-
+</script>
\ No newline at end of file
diff --git a/src/components/Home/MainContainer.vue b/src/components/Home/MainContainer.vue
deleted file mode 100644
index 6ffcd52..0000000
--- a/src/components/Home/MainContainer.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<template>
-  <div class="main-container">
-<!--    <MainHeader></MainHeader>-->
-    <div class="content-wrapper">
-      <div class="content-wrapper-header">
-        <div class="content-wrapper-context">
-          <h3 class="img-content">
-            <svg viewBox="0 0 512 512">
-              <path d="M467 0H45C20.099 0 0 20.099 0 45v422c0 24.901 20.099 45 45 45h422c24.901 0 45-20.099 45-45V45c0-24.901-20.099-45-45-45z" fill="#d6355b" data-original="#ff468c"></path>
-              <path xmlns="http://www.w3.org/2000/svg" d="M512 45v422c0 24.901-20.099 45-45 45H256V0h211c24.901 0 45 20.099 45 45z" fill="#d6355b" data-original="#d72878"></path>
-              <path xmlns="http://www.w3.org/2000/svg" d="M467 30H45c-8.401 0-15 6.599-15 15v422c0 8.401 6.599 15 15 15h422c8.401 0 15-6.599 15-15V45c0-8.401-6.599-15-15-15z" fill="#2e000a" data-original="#700029"></path>
-              <path xmlns="http://www.w3.org/2000/svg" d="M482 45v422c0 8.401-6.599 15-15 15H256V30h211c8.401 0 15 6.599 15 15z" fill="#2e000a" data-original="#4d0e06"></path>
-              <path xmlns="http://www.w3.org/2000/svg" d="M181 391c-41.353 0-75-33.647-75-75 0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45c41.353 0 75 33.647 75 75s-33.647 75-75 75z" fill="#d6355b" data-original="#ff468c"></path>
-              <path xmlns="http://www.w3.org/2000/svg" d="M391 361h-30c-8.276 0-15-6.724-15-15V211h45c8.291 0 15-6.709 15-15s-6.709-15-15-15h-45v-45c0-8.291-6.709-15-15-15s-15 6.709-15 15v45h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h15v135c0 24.814 20.186 45 45 45h30c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#d6355b" data-original="#d72878"></path>
-            </svg>
-            Adobe Stock
-          </h3>
-          <div class="content-text">Grab yourself 10 free images from Adobe Stock in a 30-day free trial plan and find perfect image, that will help you with your new project.</div>
-          <button class="content-button">Start free trial</button>
-        </div>
-        <img class="content-wrapper-img" src="https://assets.codepen.io/3364143/glass.png" alt="">
-      </div>
-      <div class="content-section">
-        <div class="content-section-title">Installed</div>
-        <ul>
-          <li class="adobe-product">
-            <div class="products">
-              <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687"></path>
-                  <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff"></path>
-                </g>
-              </svg>
-              Photoshop
-            </div>
-            <span class="status">
-          <span class="status-circle green"></span>
-          Updated</span>
-            <div class="button-wrapper">
-              <button class="content-button status-button open">Open</button>
-              <div class="menu">
-                <button class="dropdown">
-                  <ul>
-                    <li><a href="#">Go to Discover</a></li>
-                    <li><a href="#">Learn more</a></li>
-                    <li><a href="#">Uninstall</a></li>
-                  </ul>
-                </button>
-              </div>
-            </div>
-          </li>
-          <li class="adobe-product">
-            <div class="products">
-              <svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13"></path>
-                  <path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e"></path>
-                </g>
-              </svg>
-              Illustrator
-            </div>
-
-            <span class="status">
-          <span class="status-circle"></span>
-          Update Available</span>
-            <div class="button-wrapper">
-              <button class="content-button status-button">Update this app</button>
-              <div class="pop-up">
-                <div class="pop-up__title">Update This App
-                  <svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="10"></circle>
-                    <path d="M15 9l-6 6M9 9l6 6"></path>
-                  </svg>
-                </div>
-                <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
-                <div class="checkbox-wrapper">
-                  <input type="checkbox" id="check1" class="checkbox">
-                  <label for="check1">Import previous settings and preferences</label>
-                </div>
-                <div class="checkbox-wrapper">
-                  <input type="checkbox" id="check2" class="checkbox">
-                  <label for="check2">Remove old versions</label>
-                </div>
-                <div class="content-button-wrapper">
-                  <button class="content-button status-button open close">Cancel</button>
-                  <button class="content-button status-button">Continue</button>
-                </div>
-              </div>
-              <div class="menu">
-                <button class="dropdown">
-                  <ul>
-                    <li><a href="#">Go to Discover</a></li>
-                    <li><a href="#">Learn more</a></li>
-                    <li><a href="#">Uninstall</a></li>
-                  </ul>
-                </button>
-              </div>
-            </div>
-          </li>
-          <li class="adobe-product">
-            <div class="products">
-              <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
-                <g xmlns="http://www.w3.org/2000/svg">
-                  <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
-                  <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
-                </g>
-              </svg>
-              After Effects
-            </div>
-            <span class="status">
-          <span class="status-circle green"></span>
-          Updated</span>
-            <div class="button-wrapper">
-              <button class="content-button status-button open">Open</button>
-              <div class="menu">
-                <button class="dropdown">
-                  <ul>
-                    <li><a href="#">Go to Discover</a></li>
-                    <li><a href="#">Learn more</a></li>
-                    <li><a href="#">Uninstall</a></li>
-                  </ul>
-                </button>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="content-section">
-        <div class="content-section-title">Apps in your plan</div>
-        <div class="apps-card">
-          <div class="app-card">
-         <span>
-          <svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
-           <path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
-           <g xmlns="http://www.w3.org/2000/svg">
-            <path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
-           </g>
-          </svg>
-          Premiere Pro
-         </span>
-            <div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
-            <div class="app-card-buttons">
-              <button class="content-button status-button">Update</button>
-              <div class="menu"></div>
-            </div>
-          </div>
-          <div class="app-card">
-         <span>
-          <svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
-           <g xmlns="http://www.w3.org/2000/svg">
-            <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
-            <path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
-           </g>
-          </svg>
-          InDesign
-         </span>
-            <div class="app-card__subtext">Design and publish great projects &amp; mockups</div>
-            <div class="app-card-buttons">
-              <button class="content-button status-button">Update</button>
-              <div class="menu"></div>
-            </div>
-          </div>
-          <div class="app-card">
-         <span>
-          <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
-           <g xmlns="http://www.w3.org/2000/svg">
-            <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
-            <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
-           </g>
-          </svg>
-          After Effects
-         </span>
-            <div class="app-card__subtext">Industry Standart motion graphics &amp; visual effects</div>
-            <div class="app-card-buttons">
-              <button class="content-button status-button">Update</button>
-              <div class="menu"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import $ from 'jquery'
-// import MainHeader from "@/components/Home/MainHeader.vue";
-export default {
-  name:"MainContainer",
-  components:{
-    // MainHeader
-  },
-  data() {
-    return {
-
-    }},
-  mounted() {
-    this.Fun1();
-    this.Fun2();
-    this.Fun3();
-    this.Fun4();
-    this.dropdownFun();
-  },
-  created() {
-
-  },
-  computed: {
-
-  },
-  methods: {
-    Fun1(){
-      $(document).click(function (e) {
-        var container = $(".status-button");
-        var dd = $(".dropdown");
-        if (!container.is(e.target) && container.has(e.target).length === 0) {
-          dd.removeClass("is-active");
-        }
-      });
-    },
-    Fun2(){
-        $(".status-button:not(.open)").on("click", function () {
-          $(".overlay-app").addClass("is-active");
-        });
-        $(".pop-up .close").click(function () {
-          $(".overlay-app").removeClass("is-active");
-        });
-    },
-    Fun3(){
-      $(".status-button:not(.open)").click(function () {
-        $(".pop-up").addClass("visible");
-      });
-    },
-    Fun4(){
-      $(".pop-up .close").click(function () {
-        $(".pop-up").removeClass("visible");
-      });
-    },
-    dropdownFun(){
-      const dropdowns = document.querySelectorAll(".dropdown");
-      dropdowns.forEach(dropdown => {
-        dropdown.addEventListener("click", e => {
-          e.stopPropagation();
-          dropdowns.forEach(c => c.classList.remove("is-active"));
-          dropdown.classList.add("is-active");
-        });
-      });
-    }
-  }
-
-}
-</script>
\ No newline at end of file
diff --git a/src/components/HotNews/HotNews.vue b/src/components/HotNews/HotNews.vue
new file mode 100644
index 0000000..2649bd5
--- /dev/null
+++ b/src/components/HotNews/HotNews.vue
@@ -0,0 +1,27 @@
+
+
+<template>
+  <div>
+    666
+  </div>
+</template>
+<script>
+export default {
+  name: "HotNews",
+  components: {},
+  data() {
+    return {}
+  },
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index baddfff..4e59956 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import index from '../views/Index.vue'
 import home from "@/components/Home/HomePage.vue";
-
+import hotNews from "@/components/HotNews/HotNews.vue";
 
 const routes = [
   {
@@ -18,7 +18,13 @@ const routes = [
         path: '/home',
         name: 'home',
         component: home
-      }],
+      },
+      {
+        path: '/hotNews',
+        name: 'hotNews',
+        component: hotNews
+      },
+      ],
   },
 
 ]
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 844c9b5..e316030 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -17,7 +17,11 @@
   </div>
   <div class="app">
     <HomeHeader></HomeHeader>
-    <router-view></router-view>
+<!--    <router-view></router-view>-->
+    <div class="wrapper">
+      <LeftSide></LeftSide>
+      <router-view></router-view>
+    </div>
     <div class="overlay-app"></div>
   </div>
   </body>
@@ -25,13 +29,14 @@
 
 <script>
 // @ is an alias to /src
-// import HomePage from '@/components/Home/HomePage.vue'
-// import contentWrapper from "@/components/Home/ContentWrapper.vue";
 import HomeHeader from "@/components/Home/HomeHeader.vue";
+import LeftSide from "@/components/Home/LeftSide.vue";
+
 
 export default {
   name: 'HomeView',
   components: {
+    LeftSide,
     HomeHeader,
   },
   data() {