feat:download

src/components/Btn.vue

@@ -19,13 +19,14 @@ const getImgURL = computed(() => {
   }
 })
 
+defineEmits(['clickBtn'])
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center relative my-3 md:block ">
+  <div class="flex flex-col justify-center items-center relative md:block ">
     <button
-      class=" bg-gray-800 text-white w-64 md:w-40 h-14 rounded-3xl flex items-center justify-center hover:bg-mainPurple"
-      @click="$emit('showDetail')">
+      class=" bg-gray-800 text-white w-64 md:w-40 h-14 rounded-slgBtn flex items-center justify-center hover:bg-mainPurple"
+      @click="$emit('clickBtn')">
       <img v-if="props.icon" :src="getImgURL(props.icon)" class=" pr-3 md:pr-2 md:w-6">
       <span :class="props.small ? 'md:text-sm text-base' : 'text-base'">{{ props.text }}</span>
     </button>

src/views/download/index.vue

@@ -3,6 +3,7 @@ import Logo from '@/components/Logo.vue';
 import SlgBtn from '@/components/Btn.vue'
 import { computed, ref } from 'vue';
 import Card from '@/components/card.vue';
+import { useRouter } from 'vue-router';
 
 const btnList = [
   {
@@ -14,7 +15,6 @@ const btnList = [
     text: 'ios下载',
     icon: 'pingguo.svg',
     qrcode: 'qrcode.png',
-    show: ref(false),
     small: true
   },
   {
@@ -22,7 +22,6 @@ const btnList = [
     text: 'Android下载',
     icon: 'android.svg',
     qrcode: 'qrcode.png',
-    show: ref(false),
     small: true
   },
 ]
@@ -66,29 +65,37 @@ const handleDispaly = (type: string, e: Event) => {
 
 }
 
+const handleClick = (type: string, e: Event) => {
+  if (type != 'BTN1') return
+  else {
+    window.open('https://adminslg.8n.cn/#/applyShop')
+  }
+}
+
 </script>
 
 <template>
   <div class=" md:min-w-body">
-    <div class="md:flex md:justify-center md:w-pcWidth mx-auto">
+    <div class="md:flex md:justify-between md:w-pcWidth mx-auto md:pl-11">
       <!-- left -->
-      <div>
-        <div class=" pt-12 mx-auto">
+      <div class=" md:relative md:first-letter:pb-12">
+        <div class=" pt-12 mx-auto md:pt-16">
           <Logo />
         </div>
         <div class=" md:hidden text-gray-800 font-semibold mx-auto text-2xl text-center pt-10">下载上链购数字藏品平台</div>
         <div
-          class=" text-gray-500 text-lg text-center pt-7 md:text-gray-800 md:text-4xl md:font-semibold md:text-left md:leading-relaxed">
+          class=" text-gray-500 text-lg text-center pt-7 md:pt-20 md:text-gray-800 md:text-4xl md:font-semibold md:text-left md:leading-relaxed">
           集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
-        <div class=" pt-10 md:flex">
+        <div class=" pt-11 md:pt-4 relative">
           <div>
             <SlgBtn v-for="(i, index) in btnList" :icon="i.icon" :qrcode="i.qrcode" :text="i.text" :small="i.small"
               @mouseenter="handleDispaly(i.type, $event)" @mouseleave="handleDispaly(i.type, $event)"
-              @touchend="handleDispaly(i.type, $event)">
+              @touchend="handleDispaly(i.type, $event)" @click="handleClick(i.type, $event)" class="my-3 md:my-5">
             </SlgBtn>
+            <img :src="getImgUrl('qrcode')" v-show="show"
+              class=" md:hidden w-40 h-40 mx-auto z-10 absolute -bottom-40 bg-white left-0 right-0">
           </div>
-          <img :src="getImgUrl('qrcode')" v-show="show" class=" md:hidden w-40 h-40 mb-3 mx-auto z-10">
-          <div class=" hidden md:flex text-gray-800 pt-20 pl-9" style="width:450px">
+          <div class=" hidden md:flex text-gray-800 pt-20 pl-9 absolute top-6 left-48" style="width:450px">
             <div class=" mr-10 w-40">
               <img :src="getImgUrl('qrcode')" v-show="show" class=" w-40 h-40 mb-3">
               <p class=" font-semibold text-center" v-show="show">下载二维码</p>
@@ -102,16 +109,16 @@ const handleDispaly = (type: string, e: Event) => {
       </div>
       <!-- right -->
       <img src="@/assets/banner.png" class=" md:hidden w-80 px-2 mx-auto pt-8">
-      <img src="@/assets/bannerPC.png" class="hidden md:block -mt-96" style="width:934px;">
+      <img src="@/assets/bannerPC.png" class="hidden md:block -mt-72 -mr-20 -ml-10" style="width:840px;">
     </div>
-    <div class=" relative mt-5 md:w-pcWidth w-h5Width md:h-pcHeight h-h5Height mx-auto">
+    <div class=" relative mt-5 md:w-pcWidth w-h5Width md:h-pcHeight h-h5Height mx-auto md:mt-28">
       <img :src="getImgUrl('textBgH5')" class=" md:hidden mx-auto w-h5Width h-h5Height">
       <img :src="getImgUrl('textBgPC')" class=" hidden md:block mx-auto w-pcWidth h-pcHeight">
-      <p class="text-sm md:text-base text-white text-justify absolute top-0 left-0 bottom-0 right-0 mx-auto pt-10 md:pt-16"
-        >
+      <p
+        class="text-sm md:text-base text-white text-justify absolute top-0 left-0 bottom-0 right-0 mx-auto pt-10 md:pt-16">
       <p class="text-lg font-semibold text-center pb-6 md:text-3xl">
         上链购数藏平台元宇宙时空之门
-      </p>a
+      </p>
       <p class="md:px-20 px-5 md:text-lightGray">
         上链购平台是由杭州复杂美科技有限公司提供技术支持的一款集溯源与数字藏品虚实融合的资产数字化平台。杭州复杂美科技为国内区块链行业第一梯队企业，与蚂蚁、腾讯、趣链同列，其区块链发明专利申请达600多项，170多项发明专利已授权，位列全球榜单第7名，中国第3名，仅次于阿里、腾讯。
       </p>

tailwind.config.js

@@ -18,6 +18,9 @@ module.exports = {
       },
       minWidth: {
         body: '1535px'
+      },
+      borderRadius:{
+        slgBtn:'1.75rem'
       }
     },
   },