From 0333ba54c0548ae2d388e4609f13ee408a88d420 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sun, 29 Sep 2024 19:36:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20Download=20tailwind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/views/Download.vue | 261 +++++-----------------------------
 1 file changed, 33 insertions(+), 228 deletions(-)

diff --git a/tonecn/src/views/Download.vue b/tonecn/src/views/Download.vue
index 0908b2a..8cad5ff 100644
--- a/tonecn/src/views/Download.vue
+++ b/tonecn/src/views/Download.vue
@@ -21,242 +21,47 @@ onMounted(async () => {
   }
 })
 </script>
+
 <template>
-  <div class="main-container">
-    <div class="bcc"></div>
-    <div class="title">一些可以直接下载的工具</div>
-    <div class="subtitle" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意<a
-        @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。</div>
-    <div class="load-fail" v-if="loadStatus == 2">加载失败，请刷新界面重试。</div>
-    <div class="load-fail" v-if="loadStatus == 0">加载中，请稍后...</div>
-    <div class="content-container" v-if="loadStatus == 1">
+  <div class="mx-auto flex flex-col items-center">
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500">一些可以直接下载的工具
+    </div>
+    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
+      <a class="text-[#222] cursor-pointer underline]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    </div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 0">加载中，请稍后...</div>
+    <div
+      class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
+      v-if="loadStatus == 1">
       <!-- 资源项 -->
-      <a class="content" v-for="item of ResourceDatas" :href="item.src" target="_blank">
-        <div class="icon-container">
-          <img :src="item.icon_src" alt="" class="icon">
+      <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden"
+        v-for="item of ResourceDatas" :href="item.src" target="_blank">
+        <!-- 左侧图标 -->
+        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300">
+          <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
         </div>
-        <div class="describe-container">
-          <div class="title">{{ item.title }}</div>
-          <div class="describe">{{ item.describe }}</div>
-          <div class="lable-container">
-            <div class="lable" :class="{ 'lable-OS': lable.type === 'OS' }" v-for="lable of item.addition.lables">{{
-              lable.text }}</div>
+        <!-- 右侧描述 -->
+        <div class="ml-[20px] flex-1 cursor-default">
+          <div class="text-[23px] font-semibold">{{ item.title }}</div>
+          <div class="text-[14px] text-[#666] mt-[5px]">{{ item.describe }}</div>
+          <!-- 下方的标签 -->
+          <div class="flex gap-[5px] mt-[10px] flex-wrap">
+            <div class="text-[10px] font-semibold text-[#666] bg-[#eceef1] py-[1px] px-[6px] rounded-[20px]"
+              :class="[{ 'bg-[#d6eeff]': lable.type === 'OS' }]" v-for="lable of item.addition.lables">{{
+                lable.text }}</div>
           </div>
         </div>
-        <div class="lable-relative" v-if="item.addition.lable.text">
-          <div class="lable" :class="{ 'lable-2': (item.addition.lable.class.indexOf('lable-2') != -1) }">{{
-            item.addition.lable.text }}</div>
+        <!-- 右上方的标签 -->
+        <div class="relative w-0 h-0 bottom-[18px] right-[38px] text-center" v-if="item.addition.lable.text">
+          <div class="w-[100px] h-[18px] bg-[#ff1900b3] text-white text-[12px] font-semibold rotate-[45deg]"
+            :class="{ 'bg-[#ff8000b2]': (item.addition.lable.class.indexOf('lable-2') != -1) }">{{
+              item.addition.lable.text }}</div>
         </div>
       </a>
-      <div class="content content-hidden"></div>
+      <div class="xs:w-[380px] w-0 lg:w-[420px] mx-[30px] transition-all duration-300"></div>
     </div>
   </div>
   <Agreement v-if="showAgreement" @closeAgreement="showAgreement = false" />
 </template>
-<style scoped>
-.main-container {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.bcc {
-  position: fixed;
-  z-index: -1;
-  background-color: #f6f8f9;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.main-container>.title {
-  margin-top: 80px;
-  font-size: 42px;
-  cursor: default;
-  transition: all 0.4s;
-}
-
-.main-container>.subtitle {
-  margin-top: 20px;
-  color: #666;
-  cursor: default;
-  font-size: 12px;
-  padding: 0 20px;
-}
-
-.main-container>.subtitle>a {
-  color: #222;
-  cursor: pointer;
-  transition: all 0.3s;
-  border-bottom: 1px solid #f7f8f9;
-}
-
-.main-container>.subtitle>a:hover {
-  border-bottom: 1px solid #222;
-}
-
-.load-fail {
-  text-align: center;
-  margin-top: 80px;
-  cursor: default;
-  margin-bottom: 380px;
-  transition: all 0.4s;
-}
-
-.content-container {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  max-width: 1000px;
-  margin: 50px auto;
-}
-
-.content {
-  width: 380px;
-  /* height: 135px; */
-  margin: 20px 30px;
-  padding: 30px;
-  background-color: #fff;
-  border-radius: 15px;
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 5px 0px #ccc;
-  transition: all 0.4s;
-  overflow: hidden;
-}
-
-.content>.lable-relative {
-  position: relative;
-  width: 0;
-  height: 0;
-  bottom: 18px;
-  right: 38px;
-  text-align: center;
-}
-
-.content>.lable-relative>.lable {
-  width: 100px;
-  height: 18px;
-  line-height: 18px;
-  background-color: rgba(255, 25, 0, 0.7);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  transform: rotate(45deg);
-}
-
-.content>.lable-relative>.lable-2 {
-  background-color: rgba(255, 128, 0, 0.7);
-}
-
-.content-hidden {
-  opacity: 0;
-  height: 1px;
-  margin: 0 30px;
-  padding: 0 30px;
-}
-
-.content:hover {
-  box-shadow: 0px 5px 12px 0px #ccc;
-}
-
-.content .icon-container .icon {
-  width: 80px;
-  height: 80px;
-  margin-left: 10px;
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  box-shadow: 0px 1px 4px 1px #ccc;
-  border-radius: 10px;
-  transition: all 0.4s;
-}
-
-.content .describe-container {
-  margin-left: 20px;
-  /* width: 200px; */
-  flex: 1;
-  cursor: default;
-}
-
-.describe-container .title {
-  font-size: 23px;
-  font-weight: 600;
-}
-
-.describe-container .describe {
-  font-size: 14px;
-  color: #666;
-  margin-top: 5px;
-}
-
-.describe-container .lable-container {
-  display: flex;
-  gap: 5px;
-  margin-top: 10px;
-  flex-wrap: wrap;
-}
-
-.describe-container .lable-container .lable {
-  font-size: 10px;
-  font-weight: 500;
-  color: #666;
-  background-color: #eceef1;
-  padding: 1px 6px;
-  border-radius: 20px;
-}
-
-.describe-container .lable-container .lable-OS {
-  background-color: #d6eeff;
-}
-
-@media screen and (min-width: 1200px) {
-  .content {
-    width: 410px;
-    margin-left: 40px;
-    margin-right: 40px;
-  }
-}
-
-@media screen and (max-width: 550px) {
-  .main-container>.title {
-    font-size: 28px;
-    margin-top: 50px;
-  }
-
-  .content-container {
-    flex-direction: column;
-    margin: 20px 0;
-  }
-
-  .load-fail {
-    margin-top: 40px;
-    margin-bottom: 450px;
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .content {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-    border-radius: 0;
-    margin-top: 5px;
-  }
-
-  .content .icon-container .icon {
-    width: 70px;
-    height: 70px;
-  }
-
-  .describe-container .title {
-    font-size: 20px;
-  }
-}
-</style>
\ No newline at end of file