Skip to content

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

update:按钮功能及下载二维码

parent 3b4b4a58
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 186 deletions
package.json
View file @ 0024dec8
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"tailwindcss": "^3.0.24", "tailwindcss": "^3.0.24",
"vue": "^3.2.25", "vue": "^3.2.25"
"vue-router": "4"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^2.3.3",
......
src/App.vue
View file @ 0024dec8
<script setup lang="ts"> <script lang="ts" setup>
import Logo from '@/components/Logo.vue';
import SlgBtn from '@/components/Btn.vue'
import { computed, ref } from 'vue';
import Card from '@/components/card.vue';
let btnPCList = [
{
type: 'BTN1',
text: '商家申请入驻',
},
{
type: 'BTN2',
text: 'ios下载',
icon: 'pingguo.svg',
qrcode: 'IOS.png',
small: true,
defaultChecked: true
},
{
type: 'BTN3',
text: 'Android下载',
icon: 'android.svg',
qrcode: 'android.png',
small: true
},
]
const btnMobileList = [
{
type: 'BTN1',
text: '商家申请入驻',
},
{
type: 'BTN2',
text: 'ios下载',
icon: 'pingguo.svg',
small: true,
},
{
type: 'BTN3',
text: 'Android下载',
icon: 'android.svg',
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(true)
const current = ref('BTN2')
const handleDispaly = (type: string, e: Event) => {
if (type == 'BTN2' || type == 'BTN3') {
if (e.type == 'touchend')
show.value = !show.value
btnPCList[1].defaultChecked = false
if (e.type == 'mouseenter') {
show.value = true
current.value = type
}
// if (e.type == 'mouseleave')
// show.value = false
}
}
const handleClick = (type: string, e: Event) => {
if (type != 'BTN1') return
else {
window.open('https://adminslg.8n.cn/#/applyShop')
}
}
const goToWebsite = (type: string, e: Event) => {
if (type == 'BTN1') window.open('https://adminslg.8n.cn/#/applyShop')
else if (type == 'BTN2') {
window.open('https://testflight.apple.com/join/nuP0bneg')
}
else if (type == 'BTN3') {
window.open('https://slg-file.oss-cn-hangzhou.aliyuncs.com/install/android/slg2.apk')
}
}
</script> </script>
<template> <template>
<div class=" bg-bgPurple"> <div class=" bg-bgPurple">
<router-view></router-view> <div class=" md:min-w-body">
<div class="md:flex md:justify-between md:w-pcWidth mx-auto md:pl-11">
<!-- left -->
<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-3xl text-center pt-10">下载上链购数字藏品平台</div>
<div
class=" text-gray-500 text-lg text-center pt-4 md:pt-20 md:text-gray-800 md:text-28px md:font-semibold md:text-left md:leading-relaxed">
集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
<div class=" pt-11 md:pt-4 relative">
<div>
<div class=" md:block hidden">
<SlgBtn v-for="(i, index) in btnPCList" :icon="i.icon" :qrcode="i.qrcode" :text="i.text"
:small="i.small" :checked="current == i.type" @mouseenter="handleDispaly(i.type, $event)"
@mouseleave="handleDispaly(i.type, $event)" @touchend="handleDispaly(i.type, $event)"
@click="handleClick(i.type, $event)" class="my-3 md:my-5">
</SlgBtn>
</div>
<div class=" md:hidden block">
<SlgBtn v-for="(i, index) in btnMobileList" :icon="i.icon" :text="i.text" :small="i.small"
@mouseenter="handleDispaly(i.type, $event)" @mouseleave="handleDispaly(i.type, $event)"
@touchend="handleDispaly(i.type, $event)" @click="goToWebsite(i.type, $event)" class="my-3 md:my-5">
</SlgBtn>
</div>
</div>
<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(current == 'BTN2' ? 'IOS' : 'Android')" v-show="show" class=" w-40 h-40 mb-3">
<p class=" font-semibold text-center" v-show="show">{{current == 'BTN2' ? 'IOS' : 'Android'}}下载</p>
</div>
<div class="justify-self-end w-40">
<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-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 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-lg font-semibold text-center pb-6 md:text-3xl">
上链购数藏平台元宇宙时空之门
</p>
<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-16 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 w-cardWidth md:w-1/3" :small="c.small"></Card>
</div>
<div class=" text-center text-xs px-4 md:text-sm pb-9 text-gray-800">© 2021 库链科技 All Rights Reserved.Powered by
杭州库链科技有限责任公司 浙ICP备17050749号-5</div>
</div>
</div> </div>
</template> </template>
<style> <style>
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
</style> </style>
src/assets/officialAccount.png
View replaced file @ 3b4b4a58 View file @ 0024dec8
src/assets/officialAccount.png

37.6 KB | W: | H:

src/assets/officialAccount.png

35 KB | W: | H:

src/assets/officialAccount.png
src/assets/officialAccount.png
src/assets/officialAccount.png
src/assets/officialAccount.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Btn.vue
View file @ 0024dec8
...@@ -6,11 +6,13 @@ interface Props { ...@@ -6,11 +6,13 @@ interface Props {
icon?: string icon?: string
pattern?: 'download' | 'default' pattern?: 'download' | 'default'
qrcode?: string, qrcode?: string,
small?: boolean small?: boolean,
checked?: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
pattern: 'default', pattern: 'default',
small: false small: false,
checked: false
}) })
const getImgURL = computed(() => { const getImgURL = computed(() => {
...@@ -19,14 +21,15 @@ const getImgURL = computed(() => { ...@@ -19,14 +21,15 @@ const getImgURL = computed(() => {
} }
}) })
defineEmits(['clickBtn']) const emits = defineEmits(['clickBtn'])
</script> </script>
<template> <template>
<div class="flex flex-col justify-center items-center relative md:block "> <div class="flex flex-col justify-center items-center relative md:block ">
<button <button
class=" bg-gray-800 text-white w-64 md:w-40 h-14 rounded-slgBtn flex items-center justify-center hover:bg-mainPurple" 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')"> :class="checked ? ' md:bg-mainPurple' : 'md:bg-gray-800'">
<img v-if="props.icon" :src="getImgURL(props.icon)" class=" pr-3 md:pr-2 md:w-6"> <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> <span :class="props.small ? 'md:text-sm text-base' : 'text-base'">{{ props.text }}</span>
</button> </button>
......
src/components/card.vue
View file @ 0024dec8
<template> <template>
<div class=" flex bg-secondaryPurple w-cardWidth md:w-auto pt-8 pb-7 rounded-3xl"> <div class=" flex bg-secondaryPurple pt-8 pb-7 rounded-3xl">
<img :src="getSvg(props.icon)" class=" ml-9 mr-7 md:w-11 md:h-11"> <img :src="getSvg(props.icon)" class=" ml-9 mr-7 md:w-11 md:h-11">
<div> <div>
<div class=" text-sm text-gray-800"> {{ props.title }}</div> <div class=" text-sm text-gray-800"> {{ props.title }}</div>
......
src/main.ts
View file @ 0024dec8
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import './index.css' import './index.css'
import myRouter from '@/router' createApp(App).mount('#app')
createApp(App).use(myRouter).mount('#app')
src/router/index.ts deleted 100644 → 0
View file @ 3b4b4a58
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
export const basicRoutes = [
{
path: '/',
name: 'Index',
redirect: '/download',
},
{
path: '/download',
name: 'Download',
component:()=>import('@/views/download/index.vue')
},
] as RouteRecordRaw[]
const myRouter = createRouter({
history: createWebHashHistory(),
routes: basicRoutes
})
export default myRouter
src/views/download/index.vue deleted 100644 → 0
View file @ 3b4b4a58
<script lang="ts" setup>
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 = [
{
type: 'BTN1',
text: '商家申请入驻',
},
{
type: 'BTN2',
text: 'ios下载',
icon: 'pingguo.svg',
qrcode: 'qrcode.png',
small: true
},
{
type: 'BTN3',
text: 'Android下载',
icon: 'android.svg',
qrcode: 'qrcode.png',
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
}
}
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-between md:w-pcWidth mx-auto md:pl-11">
<!-- left -->
<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:pt-20 md:text-gray-800 md:text-4xl md:font-semibold md:text-left md:leading-relaxed">
集溯源与数字藏品<br>虚实融合的资产数字化平台</div>
<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)" @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>
<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>
</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-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 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-lg font-semibold text-center pb-6 md:text-3xl">
上链购数藏平台元宇宙时空之门
</p>
<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-16 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 class=" text-center text-xs px-4 md:text-sm pb-9 text-gray-800">© 2021 库链科技 All Rights Reserved.Powered by 杭州库链科技有限责任公司 浙ICP备17050749号-5</div>
</div>
</template>
\ No newline at end of file
tailwind.config.js
View file @ 0024dec8
...@@ -16,6 +16,9 @@ module.exports = { ...@@ -16,6 +16,9 @@ module.exports = {
h5Width:'338px', h5Width:'338px',
h5Height:'525px' h5Height:'525px'
}, },
fontSize:{
'28px':'1.75rem',
},
minWidth: { minWidth: {
body: '1535px' body: '1535px'
}, },
......
yarn.lock
View file @ 0024dec8
...@@ -109,11 +109,6 @@ ...@@ -109,11 +109,6 @@
"@vue/compiler-dom" "3.2.36" "@vue/compiler-dom" "3.2.36"
"@vue/shared" "3.2.36" "@vue/shared" "3.2.36"
"@vue/devtools-api@^6.0.0":
version "6.1.4"
resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
"@vue/reactivity-transform@3.2.36": "@vue/reactivity-transform@3.2.36":
version "3.2.36" version "3.2.36"
resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz#8426a941b0b09d1b94fc162d4642758183b5d133" resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz#8426a941b0b09d1b94fc162d4642758183b5d133"
...@@ -761,13 +756,6 @@ vite@^2.9.9: ...@@ -761,13 +756,6 @@ vite@^2.9.9:
optionalDependencies: optionalDependencies:
fsevents "~2.3.2" fsevents "~2.3.2"
vue-router@4:
version "4.0.15"
resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz#b4a0661efe197f8c724e0f233308f8776e2c3667"
integrity sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==
dependencies:
"@vue/devtools-api" "^6.0.0"
vue-tsc@^0.34.7: vue-tsc@^0.34.7:
version "0.34.16" version "0.34.16"
resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.16.tgz#92cc8cc23bc3e979d44bc8ed9a318d46ee5201fa" resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.16.tgz#92cc8cc23bc3e979d44bc8ed9a318d46ee5201fa"
......
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