Skip to content

S
slg-web
Commit fe39a399 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

feat:PC,H5 download页面

parent a4b8c2c4
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 22 deletions
src/App.vue
View file @ fe39a399
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</template> </template>
<style> <style>
@tailwind base; /* @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities; */
</style> </style>
src/assets/android.svg 0 → 100644
View file @ fe39a399
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>android</title>
<g id="优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="H5" transform="translate(-134.000000, -365.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="android" transform="translate(134.500000, 365.000000)">
<path d="M17.3481155,1.89759322 L18.8927421,0.261094658 C18.9588763,0.191410086 18.9345897,0.0947771875 18.8389379,0.0465968402 L18.8004531,0.0272702712 C18.7048013,-0.0211822797 18.5729065,-0.00321672919 18.5067722,0.0664678432 L16.9176825,1.75005791 C15.8797114,1.42123384 14.7218019,1.23749523 13.5,1.23749523 C12.340596,1.23749523 11.2379852,1.40299609 10.2418616,1.70106095 L8.72338982,0.0923273542 C8.65762923,0.0226427818 8.52536077,0.00494943496 8.42970899,0.0531297822 L8.39122412,0.0724563512 C8.29557234,0.120636698 8.27128576,0.217269597 8.33704636,0.287226373 L9.80545046,1.84233552 C7.49673064,2.64833556 5.8377703,4.18520693 5.5,6 L21.5,6 C21.1700762,4.22576555 19.5768764,2.7169313 17.3481155,1.89759322 Z M10.1308907,4.24182567 C9.69074311,4.24182567 9.33354355,3.98078076 9.33354355,3.65903401 C9.33354355,3.3372873 9.69074311,3.07651456 10.1308907,3.07651456 C10.5714119,3.07651456 10.9282378,3.33728727 10.9282378,3.65903401 C10.9282378,3.98078073 10.5714119,4.24182567 10.1308907,4.24182567 Z M17.0133343,4.24182567 C16.5731867,4.24182567 16.2159872,3.98078076 16.2159872,3.65903401 C16.2159872,3.3372873 16.5731867,3.07651456 17.0133343,3.07651456 C17.4538555,3.07651456 17.8106815,3.33728727 17.8106815,3.65903401 C17.8106815,3.98078073 17.4538555,4.24182567 17.0133343,4.24182567 Z" id="形状"></path>
<path d="M4,9.5358134 L4,14.4639056 C4,15.3086732 3.19027483,16 2.20000001,16 L1.79999999,16 C0.810147996,16 0,15.3086732 0,14.4639056 L0,9.5358134 C0,8.69104579 0.810147996,8 1.79999999,8 L2.20000001,8 C3.19027483,8 4,8.69104576 4,9.5358134 Z" id="路径"></path>
<path d="M26.5,9.5358134 L26.5,14.4639056 C26.5,15.3089542 25.6902748,16 24.7,16 L24.3,16 C23.310148,16 22.5,15.3089542 22.5,14.4639056 L22.5,9.5358134 C22.5,8.69104579 23.310148,8 24.3,8 L24.7,8 C25.6902748,8 26.5,8.69104579 26.5,9.5358134 Z" id="路径"></path>
<path d="M21.5,8 L21.5,17.535108 C21.5,18.1970348 20.7733343,18.7385362 19.88494,18.7385362 L18.5529049,18.7385362 L18.5529049,21.4939925 C18.5529049,22.3223655 17.8421894,23 16.9738258,23 L16.6229193,23 C15.7545556,23 15.0438401,22.3223655 15.0438401,21.4939925 L15.0438401,18.7385362 L12.0763435,18.7385362 L12.0763435,21.4623016 C12.0763435,22.2906746 11.365999,22.9685847 10.4972643,22.9685847 L10.1463579,22.9685847 C9.27799416,22.9685847 8.56727871,22.2906746 8.56727871,21.4623016 L8.56727871,18.7385362 L7.11506004,18.7385362 C6.22666576,18.7385362 5.5,18.1970348 5.5,17.535108 L5.5,8 L21.5,8 Z" id="路径"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/bannerPC.png 0 → 100644
View file @ fe39a399
This diff is collapsed.
src/assets/email.svg 0 → 100644
View file @ fe39a399
<?xml version="1.0" encoding="UTF-8"?>
<svg width="38px" height="39px" viewBox="0 0 38 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 3</title>
<g id="优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="H5" transform="translate(-62.000000, -1952.000000)">
<g id="编组-3" transform="translate(62.122846, 1952.606019)">
<circle id="椭圆形" fill="#FFFFFF" cx="18.9111111" cy="18.9111111" r="18.9111111"></circle>
<g id="yangbenxinxidanshujuyouxiang" transform="translate(9.840314, 10.736520)" fill="#D0C7FB" fill-rule="nonzero">
<path d="M1.93588967,-0.342538442 L17.1377887,-0.342538442 C18.1727712,-0.342538442 19.0273439,0.542957741 19.0368392,1.63201626 L9.54158682,7.21980252 L0.0463344493,1.64219438 C0.0558297017,0.542957741 0.891411911,-0.342538442 1.93588967,-0.342538442 Z M0.0463344493,3.77959896 L0.0368391969,13.6625506 C0.0368391969,14.7617873 0.891411911,15.6574616 1.93588967,15.6574616 L17.1377887,15.6574616 C18.1822665,15.6574616 19.0368392,14.7617873 19.0368392,13.6625506 L19.0368392,3.76942085 L9.75997763,9.09257606 C9.61754884,9.174001 9.4466343,9.174001 9.30420551,9.09257606 C9.30420551,9.10275418 0.0463344493,3.77959896 0.0463344493,3.77959896 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/location.svg 0 → 100644
View file @ fe39a399
<?xml version="1.0" encoding="UTF-8"?>
<svg width="38px" height="39px" viewBox="0 0 38 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 4</title>
<g id="优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="H5" transform="translate(-62.000000, -2072.000000)">
<g id="编组-4" transform="translate(62.143071, 2072.606019)">
<circle id="椭圆形备份" fill="#FFFFFF" cx="18.9111111" cy="18.9111111" r="18.9111111"></circle>
<g id="dizhi" transform="translate(9.856929, 8.393981)" fill="#D0C7FB" fill-rule="nonzero">
<path d="M8.5159375,22 L8.5,22 C8.12940819,21.999622 7.77501484,21.84269 7.5187854,21.5655 C7.31796875,21.34825 5.4968396,19.36 3.6852771,16.841 C1.2399292,13.442 0,10.7305 0,8.7851543 C0,3.94075 3.81331665,0 8.5,0 C13.1866833,0 17,3.94075 17,8.7845957 C17,9.9615957 16.5617188,11.4036914 15.6978979,13.0696543 C14.864375,14.6761914 13.6111646,16.5423457 11.9722583,18.6169414 L11.9589771,18.6334414 L9.52,21.5209414 C9.26747486,21.8227475 8.90161156,21.9973083 8.5159375,22 Z M8.5,12.8969414 C10.6940625,12.8969414 12.4790625,11.05225 12.4790625,8.78461719 C12.4790625,6.51698437 10.6940625,4.67222852 8.5,4.67222852 C6.3059375,4.67222852 4.5209375,6.51691992 4.5209375,8.78457422 C4.5209375,11.0522285 6.3059375,12.8969414 8.5,12.8969414 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/pingguo.svg 0 → 100644
View file @ fe39a399
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="23px" viewBox="0 0 20 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>pingguo-3</title>
<g id="优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="H5" transform="translate(-141.000000, -287.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="pingguo-3" transform="translate(141.000000, 287.000000)">
<path d="M16.7051943,12.6312174 C16.6742175,8.45492616 19.2424762,8.34685209 19.3579353,8.27994908 C17.9132897,6.35005478 15.6660633,6.04641809 14.8662985,6.01811298 C12.9541848,5.84056269 11.1350016,7.02680439 10.1634563,7.02680439 C9.19472713,7.02680439 7.69657619,6.01553979 6.11112696,6.0412717 C4.0272328,6.06957681 2.1038548,7.14517124 1.02811485,8.85119779 C-1.13744545,12.2864096 0.473348428,17.373611 2.58540333,20.1578052 C3.61608611,21.5215971 4.8467101,23.0526466 6.46313613,22.9986096 C8.01760853,22.9419993 8.60616784,22.0774067 10.4873047,22.0774067 C12.3684416,22.0774067 12.8950473,22.9986096 14.5424501,22.9677312 C16.2151976,22.9394261 17.2768572,21.5782074 18.2990918,20.209269 C19.4846586,18.6267557 19.9718393,17.172902 20,17.0957062 C19.963391,17.080267 16.7361712,15.4154116 16.7023783,12.6312174 L16.7051943,12.6312174 L16.7051943,12.6312174 Z" id="路径"></path>
<path d="M10,6 C10,2.6877579 12.6850069,0 16,0 C16,3.31499313 13.3122421,6 10,6 Z" id="路径"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/tel.svg 0 → 100644
View file @ fe39a399
<?xml version="1.0" encoding="UTF-8"?>
<svg width="39px" height="38px" viewBox="0 0 39 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>dianhuahover</title>
<g id="优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="H5" transform="translate(-61.000000, -1838.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="dianhuahover" transform="translate(61.755556, 1838.072685)">
<path d="M19.2444444,-0.0726851852 C8.76777509,-0.0726851852 0.244444444,8.45078374 0.244444444,18.9273538 C0.244444444,29.4039238 8.76785296,37.9273148 19.2444444,37.9273148 C29.7210359,37.9273148 38.2444444,29.4044689 38.2444444,18.927821 C38.2444444,8.45117313 29.7210359,-0.0726851852 19.2444444,-0.0726851852 L19.2444444,-0.0726851852 Z M26.1936249,28.8723678 C19.4661634,28.8723678 9.46797716,18.2011419 9.46797716,12.5959933 C9.46797716,10.3550943 11.3999773,8.83881062 13.0124824,8.83881062 C14.7175068,8.83881062 17.6234506,13.7559854 17.6234506,14.7959286 C17.6234506,15.5285264 17.3071097,16.0468821 17.0534996,16.4637238 C16.8562344,16.7869562 16.7398455,16.9889716 16.7270735,17.2218656 C16.9886661,18.0400513 20.0498598,21.0922439 20.9143458,21.3995114 C21.1440473,21.379341 21.4348052,21.2277905 21.7421511,21.0677902 C22.2238272,20.8168285 22.8235276,20.5042265 23.5561659,20.5042265 C24.7273748,20.5042265 29.7376631,23.7722578 29.7376631,25.1157303 C29.738208,27.6702827 28.2825104,28.8723678 26.1937028,28.8723678 L26.1936249,28.8723678 Z" id="形状"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/Btn.vue
View file @ fe39a399
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue';
interface Props { interface Props {
text: string text: string
icon?: string icon?: string
pattern?: 'download' | 'default' pattern?: 'download' | 'default'
qrcode?: string,
small?: boolean
} }
const props = withDefaults(defineProps<Props>(),{ const props = withDefaults(defineProps<Props>(), {
pattern: 'default' pattern: 'default',
small: false
}) })
const handleClick = (()=>{ const getImgURL = computed(() => {
console.log('click'); return (url: string) => {
return new URL(`../assets/${url}`, import.meta.url).href
}
}) })
</script> </script>
<template> <template>
<button class=" bg-gray-800 text-white w-64 h-14 rounded-3xl inline-block"> <div class="flex flex-col justify-center items-center relative my-3 md:block ">
<img v-if="props.icon" :src="props.icon" @click="handleClick"> <button
<span >{{props.text}}</span> class=" bg-gray-800 text-white w-64 md:w-40 h-14 rounded-3xl flex items-center justify-center hover:bg-mainPurple"
</button> @click="$emit('showDetail')">
<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>
</div>
</template> </template>
\ No newline at end of file
src/components/card.vue 0 → 100644
View file @ fe39a399
<template>
<div class=" flex bg-secondaryPurple w-cardWidth md:w-auto pt-8 pb-7 rounded-3xl">
<img :src="getSvg(props.icon)" class=" ml-9 mr-7 md:w-11 md:h-11">
<div>
<div class=" text-sm text-gray-800"> {{ props.title }}</div>
<div :class="!props.small ? 'text-xl font-semibold' : 'text-sm'">
{{ props.detail }}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from '@vue/reactivity';
const props = withDefaults(defineProps<{
icon: string,
title: string,
detail: string,
small?: boolean
}>(), {
small: false
})
const getSvg = computed(() => {
return (svg: string) => {
return new URL(`../assets/${svg}.svg`, import.meta.url).href
}
})
</script>
\ No newline at end of file
src/views/download/index.vue
View file @ fe39a399
<script lang="ts" setup> <script lang="ts" setup>
import Logo from '@/components/Logo.vue'; import Logo from '@/components/Logo.vue';
import SlgBtn from '@/components/Btn.vue' import SlgBtn from '@/components/Btn.vue'
import { computed, ref } from 'vue';
import Card from '@/components/card.vue';
const btnList = [
{
type: 'BTN1',
text: '商家申请入驻',
},
{
type: 'BTN2',
text: 'ios下载',
icon: 'pingguo.svg',
qrcode: 'qrcode.png',
show: ref(false),
small: true
},
{
type: 'BTN3',
text: 'Android下载',
icon: 'android.svg',
qrcode: 'qrcode.png',
show: ref(false),
small: true
},
]
const getImgUrl = computed(() => {
return (url: string) => {
return new URL(`../../assets/${url}.png`, import.meta.url).href
}
})
const contact = [
{
icon: 'tel',
title: '联系电话',
detail: '138-5811-2690',
},
{
icon: 'email',
title: '联系邮箱',
detail: 'support@33.cn',
},
{
icon: 'location',
title: '联系地址',
detail: '杭州市西湖区东部软件园6幢702',
small: true
},
]
/* handle display QRCode */
const show = ref(false)
const handleDispaly = (type: string, e: Event) => {
if (type == 'BTN2' || type == 'BTN3') {
if (e.type == 'touchend')
show.value = !show.value
if (e.type == 'mouseenter')
show.value = true
if (e.type == 'mouseleave')
show.value = false
}
}
</script> </script>
<template> <template>
<div class=" md:hidden"> <div class=" md:min-w-body">
<div class=" pt-12 mx-auto"> <div class="md:flex md:justify-center md:w-pcWidth mx-auto">
<Logo /> <!-- left -->
<div>
<div class=" pt-12 mx-auto">
<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">
集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
<div class=" pt-10 md:flex">
<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)">
</SlgBtn>
</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=" 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>
</div>
<div class="justify-self-end">
<img :src="getImgUrl('officialAccount')" class=" w-40 h-40 mb-3">
<p class="font-semibold text-center">扫一扫关注公众号</p>
</div>
</div>
</div>
</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;">
</div>
<div class=" relative mt-5 md:w-pcWidth w-h5Width md:h-pcHeight h-h5Height mx-auto">
<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-lg font-semibold text-center pb-6 md:text-3xl">
上链购数藏平台元宇宙时空之门
</p>a
<p class="md:px-20 px-5 md:text-lightGray">
上链购平台是由杭州复杂美科技有限公司提供技术支持的一款集溯源与数字藏品虚实融合的资产数字化平台。杭州复杂美科技为国内区块链行业第一梯队企业，与蚂蚁、腾讯、趣链同列，其区块链发明专利申请达600多项，170多项发明专利已授权，位列全球榜单第7名，中国第3名，仅次于阿里、腾讯。
</p>
<p class=" pt-4 md:px-20 px-5 md:text-lightGray">
上链购诞生于2018年，为国内首个资产数字化应用的平台，亦是目前唯一将数字防伪凭证与数字藏品进行虚实融合应用的平台，旨在链接虚拟与现实。上链购同时是一个多商户数字藏品平台，企业或个人可入驻上链购，将资产进行链上溯源并锻造出FT/NFT数字资产进行销售，包括实物映射、艺术品、非遗传承、创意版权、时尚品牌、游戏动漫等，它可以是虚拟资产，亦或是实物资产（实物交割），您可以在上链购平台进行上架、流转、收藏各类数字资产，抢先体验元宇宙世界中的电子商务全新模式。
</p>
</p>
</div>
<img :src="getImgUrl('officialAccount')" class="md:hidden w-36 mx-auto pt-12">
<p class=" md:hidden font-semibold text-center text-gray-800">扫一扫关注公众号</p>
<div class="pt-12 pb-20 md:flex md:w-pcWidth mx-auto md:justify-between md:gap-x-7">
<Card v-for="c in contact" :icon="c.icon" :title="c.title" :detail="c.detail" class=" my-5 mx-auto md:w-1/3"
:small="c.small"></Card>
</div> </div>
<div class=" 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">集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
<SlgBtn text="ios"></SlgBtn>
</div> </div>
</template> </template>
\ No newline at end of file
tailwind.config.js
View file @ fe39a399
...@@ -2,10 +2,22 @@ module.exports = { ...@@ -2,10 +2,22 @@ module.exports = {
content: ["./src/**/*.{html,js,ts,vue}"], content: ["./src/**/*.{html,js,ts,vue}"],
theme: { theme: {
extend: { extend: {
colors:{ colors: {
mainPurple:'#4C37D6', mainPurple: '#4C37D6',
secondaryPurple:'#D0C7FB', secondaryPurple: '#D0C7FB',
bgPurple:'#E8E7FC', bgPurple: '#E8E7FC',
lightGray:'#C5C5C5'
},
spacing: {
cardWidth: '340px',
bodySet: '1535px',
pcWidth: '1220px',
pcHeight:'383px',
h5Width:'338px',
h5Height:'525px'
},
minWidth: {
body: '1535px'
} }
}, },
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment