zhanghuiqing
/
--Pc-ClientWeb-Qing
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 1 Wiki Activité

3 Révisions
22e5aedaff ... 3b5b80660e

Auteur SHA1 Message Date
  Weller 3b5b80660e 更新 il y a 1 an
  Weller b81fed1523 更新图片样式 il y a 2 ans
  Weller 1317c95d47 兼容手机 il y a 2 ans
17 fichiers modifiés avec 2467 ajouts et 3859 suppressions
Vue séparée
Option de Diff
Voir les Statistiques
  1. +21
    -2
      .gitignore
  2. +3
    -0
      .vscode/extensions.json
  3. +7
    -0
      README.md
  4. +27
    -24
      index.html
  5. +1399
    -2893
      package-lock.json
  6. +14
    -11
      package.json
  7. +13
    -1
      src/App.vue
  8. BIN
     
  9. +58
    -42
      src/components/ContentDesign.vue
  10. +312
    -285
      src/components/Download.vue
  11. +313
    -339
      src/components/HomeStyle.vue
  12. +96
    -141
      src/components/NavigationBar.vue
  13. +67
    -0
      src/components/default-browser.vue
  14. +8
    -1
      src/main.js
  15. +8
    -0
      src/utlis/browser.js
  16. +104
    -107
      src/views/index.vue
  17. +17
    -13
      vite.config.js

+ 21
- 2
.gitignore Voir le fichier

@@ -1,5 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
.DS_Store
dist
dist-ssr
*.local
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

+ 3
- 0
.vscode/extensions.json Voir le fichier

@@ -0,0 +1,3 @@
{
"recommendations": ["johnsoncodehk.volar"]
}

+ 7
- 0
README.md Voir le fichier

@@ -0,0 +1,7 @@
# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

+ 27
- 24
index.html Voir le fichier

@@ -1,25 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="icon" href="http://h5.99813608.zhiyingos.com/static/favicon.png" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

html, body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
user-select: none;
}
img {
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="icon" href="http://h5.99813608.zhiyingos.com/static/favicon.png" /> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<style>
html,
body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
user-select: none;
}
img {
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

+ 1399
- 2893
package-lock.json
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 14
- 11
package.json Voir le fichier

@@ -1,21 +1,24 @@
{
"name": "ClientHomeWeb",
"name": "pc-official-website",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^0.21.1",
"element-plus": "^1.0.2-beta.48",
"qs": "^6.10.1",
"vue": "^3.0.4",
"vue-router": "^4.0.8",
"vuex": "^4.0.0-rc.2"
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"bootstrap-vue-3": "^0.1.10",
"element-plus": "^2.1.10",
"qrcode.vue": "^3.3.3",
"vue": "^3.2.33",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.4",
"vite": "^1.0.0-rc.13",
"vite-plugin-style-import": "^1.0.0"
"@vitejs/plugin-vue": "^2.3.1",
"vite": "^2.9.5"
}
}

+ 13
- 1
src/App.vue Voir le fichier

@@ -10,4 +10,16 @@ export default {
}
</script>


<style type="text/css">
html,body{
width: 100%;
height: 100%;
position: absolute;
left: 0;top: 0;
overflow-x: hidden;
overflow-y: auto;
}
</style>

BIN
Voir le fichier


+ 58
- 42
src/components/ContentDesign.vue Voir le fichier

@@ -1,19 +1,28 @@
<template>
<div
class="content-design"
:style="'background:url(' + modBackground + ')'"
:style="{
background: 'url(' + modBackground + ')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}"
ref="pronbit"
v-if="mod.isShow === '1'"
>
<!-- type === 1 -->
<div class="content-margin" v-show="isShow">
<div v-if="mod.desc === '左文右图' || mod.desc === '左图右文'">
<div class="content-margin container" >
<div v-if="mod.desc === '左文右图' || mod.desc === '右文左图'" class="row justify-content-center">
<div v-if="mod.desc === '右文左图'" class="col-lg-1 d-none d-lg-block"></div>
<div v-if="mod.desc === '右文左图'"
class="content-img col-lg-4 col-md-4 col-sm-8 col-8"
>
<img style="width: 100%" :src="mod.mainImage" alt="" />
</div>
<div
class="content-text"
class="content-text col-lg-7 col-md-8 col-sm-12"
:style="
'float:' +
getDescStyle('text', mod.desc) +
';text-align:' +
'text-align:' +
getDescStyle('text', mod.desc)
"
>
@@ -22,9 +31,9 @@
<div class="mod-content">{{ mod.content }}</div>
</div>

<div
class="content-img"
:style="'float:' + getDescStyle('img', mod.desc)"
<div v-if="mod.desc === '左文右图'" class="col-lg-1 d-none d-lg-block"></div>
<div v-if="mod.desc === '左文右图'"
class="content-img col-lg-4 col-md-4 col-sm-8 col-8"
>
<img style="width: 100%" :src="mod.mainImage" alt="" />
</div>
@@ -32,10 +41,10 @@

<!-- type === 2 -->
<div
class="modtype2-box"
v-if="mod.desc === '两侧文中间图' && mod.isShow === '1'"
class="modtype2-box row justify-content-center align-items-center"
>
<div class="left-text-content">
<div class="left-text-content col-lg-4 col-md-4 col-10">
<div class="type-title">{{ mod.leftSetting.mainText }}</div>
<div class="type-subText">{{ mod.leftSetting.subText }}</div>

@@ -44,31 +53,31 @@
</div>
</div>

<div class="content-img">
<div class="content-img col-lg-4 col-md-4 col-8">
<img style="width: 100%" :src="mod.mainImage" alt="" />
</div>

<div class="right-text-content">
<div class="type-title" style="text-align: right">
<div class="right-text-content col-lg-4 col-md-4 col-10">
<div class="type-title">
{{ mod.rightSetting.mainText }}
</div>
<div class="type-subText" style="text-align: right">
<div class="type-subText">
{{ mod.rightSetting.subText }}
</div>

<div class="type-content" style="text-align: right">
<div class="type-content">
{{ mod.rightSetting.content }}
</div>
</div>
</div>

<div
class="modtype3-box"
class="modtype3-box row justify-content-center"
v-if="mod.desc === '上图下文样式' && mod.isShow === '1'"
>
<div class="modFor-box" v-for="(item, index) in modList" :key="index">
<div class="modFor-box col-lg-4 col-md-4 col-10" v-for="(item, index) in modList" :key="index">
<img class="item-img" :src="item.img" />
<div class="type3-title">{{ item.mainText }}</div>
<h1 >{{ item.mainText }}</h1>
<div class="type3-subheading">{{ item.subText }}</div>
<div class="type3-content">{{ item.content }}</div>
</div>
@@ -131,7 +140,7 @@ export default {
data() {
return {
winHeight: 0,
isShow: false,
// isShow: false,
};
},
mounted() {},
@@ -153,10 +162,10 @@ export default {
methods: {
handleScrollx() {
if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
this.isShow = true;
window.removeEventListener('scroll', this)
}
// if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
// this.isShow = true;
// window.removeEventListener('scroll', this)
// }
},
},
};
@@ -164,21 +173,20 @@ export default {

<style scoped>
.content-design {
height: 640px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
/* height: 640px;
width: 100%; */
display: flex;
align-items: center;
}

.content-margin {
width: 1200px;
/* width: 1200px; */
margin: 0 auto;
}

.content-text {
width: 600px;
/* width: 600px; */
/* min-height: 400px; */
display: flex;
flex-flow: column;
padding-top: 78px;
@@ -208,9 +216,9 @@ export default {
}
}

.left-text-content {
/* .left-text-content {
animation: leftContent 1.7s;
}
} */

@keyframes leftContent {
from {
@@ -247,10 +255,12 @@ export default {
}

.content-img {
width: 260px;
max-width: 260px;
margin-top: 20px;
margin-bottom: 20px;
animation-name: adinmation-contentImg;
animation-duration: 1.2s;
opacity: 1;
/* animation-duration: 1.2s;
opacity: 1; */
}

@keyframes adinmation-contentImg {
@@ -261,25 +271,29 @@ export default {
}

.modtype2-box {
width: 100%;
/* width: 100%; */
display: flex;
height: 100%;
/* height: 100%; */
align-items: center;
justify-content: space-between;
color: #333333;
font-weight: bold;
padding-top: 40px;
padding-bottom: 40px;
}

.type-title {
font-size: 40px;
margin-bottom: 5px;
line-height: 40px;
text-align: center;
}

.type-content {
font-size: 16px;
line-height: 22px;
white-space: pre-line;
text-align: center;
/* white-space: pre-line; */
}

.modtype3-box {
@@ -294,7 +308,7 @@ export default {
}

.modFor-box {
width: 270px;
/* width: 270px; */
height: 100%;
display: flex;
flex-flow: column;
@@ -326,8 +340,10 @@ export default {
}

.item-img {
width: 270px;
height: 210px;
max-width: 270px;
/* height: 210px; */
contain: fit;
width: 100%;
border-radius: 10px;
margin-bottom: 40px;
color: #333333;


+ 312
- 285
src/components/Download.vue Voir le fichier

@@ -1,285 +1,312 @@
<template>
<div class="download-box" ref="pronbit">
<div class="title">
<span>下载软件地址</span>
</div>

<div
class="download-bg"
:style="'background:url(' + mod.bgImage + ')'"
v-show="isShow"
>
<div class="mainImg-box" style="float: right">
<img :src="mod.mainImage" style="width: 100%" alt="" />
</div>

<div class="mainRight-box" style="float: left">
<div class="modLogo-text">
<img class="modLogo" :src="mod.applyLogo" alt="" />
<span>{{ mod.mainText }}</span>
</div>
<div class="subText">{{ mod.subText }}</div>
<div class="download-code">
<div class="downloadImg">
<div
class="downloadImg-box"
:style="getHoversColor"
@click="downloadLink(linkData.iosLink)"
>
<img
:src="mod.iosDownloadBtn"
style="width: 42px; height: 42px"
alt=""
/>
<div style="margin-left: 10px">IPhone下载</div>
</div>

<div
class="downloadImg-box"
:style="getHoversColor"
@click="downloadLink(linkData.androidLink)"
>
<img
:src="mod.androidDownloadBtn"
style="width: 42px; height: 42px"
alt=""
/>
<div style="margin-left: 10px">Android下载</div>
</div>
</div>

<div class="download-content-code">
<img class="modQrCde" :src="mod.qrcode" alt="" />
<div>扫一扫轻松下载</div>
</div>
</div>
</div>
</div>
</div>
</template>


<script>
export default {
computed: {
getHoversColor: function () {
return {
"--text-color": this.mod.unSelectTextColor,
"--text-color-hover": this.mod.selectTextColor,
"--background-color": this.mod.unSelectBgColor,
"--background-color-hover": this.mod.selectBgColor,
"--box-shadow-color-hover": this.mod.selectBgColor + "4D",
};
},
},
data() {
return {
winHeight: 0,
isShow: false,
};
},

props: {
mod: {
type: Object,
default: () => {},
},
linkData: {
tpye: Object,
default: () => {},
},
},
created() {

console.log(this.linkData)
window.addEventListener("scroll", this.handleScrollx, true);
this.winHeight =
document.documentElement.clientHeight / 2 ||
document.body.clientHeight / 2;
},
methods: {
downloadLink: function (link) {
window.open(link);
},
handleScrollx() {
if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
this.isShow = true;

window.removeEventListener("scroll", this);
}
},
},
};
</script>


<style scoped>
.download-box {
width: 1200px;
height: 610px;
margin: 0 auto;
display: flex;
flex-flow: column;
}
.title {
color: #0f0f0f;
font-size: 26px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 55px;
letter-spacing: 5px;
}

.title::after {
content: "";
width: 12px;
height: 12px;
background: #ff4242;
border-radius: 50%;
margin-left: 5px;
}

.download-bg {
width: 100%;
height: 520px;
background-size: 100% 100% !important;
background-repeat: no-repeat;
box-sizing: border-box;
overflow: hidden;
padding: 94px 110px 0;
opacity: 0;
animation: aniamtionDownload 1.2s ease-in-out forwards;
}

@keyframes aniamtionDownload {
100% {
opacity: 1;
}
}

.mainImg-box {
width: 344px;
position: relative;
animation: aniamtionMainImg 1.2s forwards;
transform: translateY(600px);
}

@keyframes aniamtionMainImg {
100% {
transform: translateX(0);
}
}

.mainImg-box::after {
content: "";
height: 100px;
background: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgb(255, 255, 255) 100%
);
width: 100%;
top: 326px;
z-index: 99;
position: absolute;
left: 0px;
}

.mainRight-box {
display: flex;
flex-flow: column;
transform: translateX(-220px);
animation: aniamtionMainRight 1.2s ease-in-out forwards;
}

@keyframes aniamtionMainRight {
100% {
transform: translateX(0px);
}
}

.modLogo-text {
display: flex;
color: #333333;
font-size: 40px;
font-weight: bold;
align-items: center;
margin-top: 14px;
}

.modLogo {
margin-right: 18px;
width: 60px;
height: 60px;
border-radius: 5px;
}

.subText {
margin-top: 12px;
font-size: 20px;
color: #999999;
white-space: pre-line;
}

.download-code {
display: flex;
margin-top: 26px;
}

.downloadImg {
display: flex;
flex-flow: column;
margin-right: 20px;
width: 222px;
justify-content: space-between;
}

.download-content-code {
width: 135px;
height: 170px;
background: #ffffff;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
color: #333333;
font-size: 14px;
display: flex;
flex-flow: column;
align-items: center;
}

.modQrCde {
width: 100%;
margin-bottom: 12px;
border-radius: 3px;
}

.downloadImg-box {
width: 222px;
height: 72px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 15px;
border-radius: 10px;
color: var(--text-color);
background: var(--background-color);
box-shadow: 0px;
transition: color 0.25s, background-color 0.25s, box-shadow　0.25s;
cursor: pointer;
}

.downloadImg-box:hover {
color: var(--text-color-hover);
background: var(--background-color-hover);
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
transition: color 0.35s, background-color 0.35s, box-shadow　0.35s;
}

@media screen and (max-width: 1500px) {
.mainImg-box {
width: 300px;
}
}
</style>
<template>
<div class="download-box" ref="pronbit">
<div class="container">
<div class="title">
<h3>下载软件地址</h3>
</div>
<div class="row" :style="'background:url(' + mod.bgImage + ')'" style="padding: 40px 20px 0 20px;">
<div class=" col-lg-7 col-md-8 col-sm-12 center" style="margin-top: 20px;margin-bottom: 40px;">
<div class="mainRight-box ">
<div class="modLogo-text">
<img class="modLogo" :src="mod.applyLogo" alt="" />
<h1>{{ mod.mainText }}</h1>
</div>
<h2 class="subText">{{ mod.subText }}</h2>
<div class="mod-cnt">
{{mod.content}}
</div>
<div class="download-code">
<div class="downloadImg">
<div class="downloadImg-box" :style="getHoversColor"
@click="downloadLink(linkData.iosLink)">
<img :src="mod.iosDownloadBtn" style="width: 42px; height: 42px" alt="" />
<div style="margin-left: 10px">iPhone下载</div>
</div>
<div class="downloadImg-box" :style="getHoversColor"
@click="downloadLink(linkData.androidLink)">
<img :src="mod.androidDownloadBtn" style="width: 42px; height: 42px" alt="" />
<div style="margin-left: 10px">Android下载</div>
</div>
</div>
<div class="download-content-code">
<!-- <img class="modQrCde" :src="mod.qrcode" alt="" /> -->
<qrcode-vue class="modQrCde" :value="url" size="100" level="H" />
<div>扫一扫轻松下载</div>
</div>
</div>
</div>
</div>
<div class="col-lg-1 d-none d-lg-block"></div>
<div class="col-lg-4 col-md-4 col-sm-12" style="margin-top: 20px;">
<div class="iphone">
<img class="iphone12" :src="mod.mainImage" alt="" />
</div>
</div>
</div>
</div>
<DefaultBowser ref="bowser"/>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import DefaultBowser from './default-browser.vue'
import {isWxBrowser} from '../utlis/browser.js'
export default {
components: {
QrcodeVue,
DefaultBowser,
},
computed: {
getHoversColor: function() {
return {
"--text-color": this.mod.unSelectTextColor,
"--text-color-hover": this.mod.selectTextColor,
"--background-color": this.mod.unSelectBgColor,
"--background-color-hover": this.mod.selectBgColor,
"--box-shadow-color-hover": this.mod.selectBgColor + "4D",
};
},
},
data() {
return {
winHeight: 0,
isShow: false,
url: ''
};
},
props: {
mod: {
type: Object,
default: () => {},
},
linkData: {
tpye: Object,
default: () => {},
},
},
created() {
console.log(this.linkData)
window.addEventListener("scroll", this.handleScrollx, true);
this.winHeight =
document.documentElement.clientHeight / 2 ||
document.body.clientHeight / 2;
this.url = document.URL
},
methods: {
downloadLink: function(link) {
// window.open(link);
if (isWxBrowser() && link.endsWith('.apk')) {
console.log('请使用默认浏览器打开')
this.$refs.bowser.show()
} else {
window.open(link);
}
},
handleScrollx() {
if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
this.isShow = true;
window.removeEventListener("scroll", this);
}
},
},
};
</script>
<style scoped>
.iphone {
width: 100%;
max-height: 600px;
overflow: hidden;
}
.iphone12 {
width: 100%;
height: 100%;
object-fit: scale-down;
}
.download-box {
display: flex;
flex-flow: column;
}
.title {
color: #0f0f0f;
font-size: 26px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 55px;
letter-spacing: 5px;
}
.title::after {
content: "";
width: 12px;
height: 12px;
background: #ff4242;
border-radius: 50%;
margin-left: 5px;
}
.download-bg {
/* width: 100%; */
/* height: 520px; */
background-size: 100% 100% !important;
background-repeat: no-repeat;
box-sizing: border-box;
/* padding: 94px 110px 0; */
/* opacity: 0; */
/* animation: aniamtionDownload 1.2s ease-in-out forwards; */
}
@keyframes aniamtionDownload {
100% {
opacity: 1;
}
}
.mainImg-box {
/* width: 344px;
position: relative; */
/* animation: aniamtionMainImg 1.2s forwards; */
/* transform: translateY(600px); */
}
/*
@keyframes aniamtionMainImg {
100% {
transform: translateX(0);
}
} */
.mainImg-box::after {
content: "";
height: 100px;
background: linear-gradient(rgba(255, 255, 255, 0) 0%,
rgb(255, 255, 255) 100%);
width: 100%;
top: 326px;
z-index: 99;
position: absolute;
left: 0px;
}
.mainRight-box {
display: flex;
flex-direction: column;
max-width: 600px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.modLogo-text {
display: flex;
color: #333333;
font-weight: bold;
align-items: center;
margin-top: 14px;
}
.modLogo {
margin-right: 18px;
width: 60px;
height: 60px;
border-radius: 5px;
}
.subText {
margin-top: 12px;
font-size: 20px;
color: #999999;
white-space: pre-line;
}
.download-code {
display: flex;
margin-top: 26px;
justify-content: center;
}
.downloadImg {
display: flex;
flex-flow: column;
margin-right: 20px;
justify-content: space-between;
}
.download-content-code {
width: 120px;
height: 170px;
background: #ffffff;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
color: #333333;
font-size: 14px;
display: flex;
flex-flow: column;
align-items: center;
}
.modQrCde {
/* width: 100%; */
margin-bottom: 12px;
border-radius: 3px;
}
.downloadImg-box {
/* width: 222px; */
height: 72px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 15px;
border-radius: 10px;
color: var(--text-color);
background: var(--background-color);
box-shadow: 0px;
transition: color 0.25s, background-color 0.25s, box-shadow 0.25s;
cursor: pointer;
padding-right: 12px;
}
.downloadImg-box:hover {
color: var(--text-color-hover);
background: var(--background-color-hover);
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
transition: color 0.35s, background-color 0.35s, box-shadow 0.35s;
}
/* @media screen and (max-width: 1500px) {
.mainImg-box {
width: 300px;
}
} */
.mod-cnt {
color: #333;
}
</style>

+ 313
- 339
src/components/HomeStyle.vue Voir le fichier

@@ -1,339 +1,313 @@
<template>
<div
class="home-style"
:style="'background:url(' + mod.bgImage + ')'"
v-if="mod"
id="home-style"
ref="pronbit"
>
<transition name="el-fade-in-linear">
<div class="home-margin" v-show="showLinear">
<div
class="homeTextStyle"
:style="'float:' + getDescStyle('text', mod.desc) + ';'"
>
<div class="text-titleFont">
{{ mod.mainText }}
</div>
<div class="text-contentFont">{{ mod.subText }}</div>
<div class="text-contentButton-flex">
<div
class="button-box chang-button"
:style="getHoversColor"
@click="downloadLink(linkData.iosLink)"
>
<img
class="storeSvg"
:src="mod.iosDownloadBtn"
alt=""
srcset=""
/>
<div>IPhone下载</div>
</div>
<div
class="button-box chang-button"
:style="getHoversColor"
@click="downloadLink(linkData.androidLink)"
>
<img
class="storeSvg"
:src="mod.androidDownloadBtn"
alt=""
srcset=""
/>
<div>Android下载</div>
</div>

<el-tooltip
class="item"
effect="light"
content="Bottom Center 提示文字"
placement="bottom"
>
<template #content>
<img
class="codeSvg"
:src="mod.applyLogo"
style="width: 120px; height: 120px"
/>
</template>
<div class="button-boxs code-button" :style="getHoversColor">
<img class="codeSvg" :src="mod.applyLogo" alt="" srcset="" />
</div>
</el-tooltip>
</div>
</div>

<div
class="homeImgStyle"
:style="'float:' + getDescStyle('img', mod.desc)"
>
<img class="iphone12" :src="mod.mainImage" alt="" />
</div>
</div>
</transition>
</div>
</template>


<script>
export default {
computed: {
getDescStyle: function () {
return function (value, desc) {
if (desc === "左图右文") {
if (value === "text") {
return "right";
}
if (value === "img") {
return "left";
}
}
if (desc === "左文右图") {
if (value === "text") {
return "left";
}
if (value === "img") {
return "right";
}
}
};
},
getHoversColor: function () {
return {
"--text-color": this.mod.unSelectTextColor,
"--text-color-hover": this.mod.selectTextColor,
"--background-color": this.mod.unSelectBgColor,
"--background-color-hover": this.mod.selectBgColor,
"--box-shadow-color-hover": this.mod.selectBgColor + "4D",
};
},
},
props: {
mod: {
type: Object,
default: () => {},
},
linkData: {
tpye: Object,
default: () => {},
},
},
created() {
window.addEventListener("scroll", this.handleScrollx, true);
},

mounted() {
this.showLinear = true;
},

data() {
return {
codeSvg: false,
showLinear: false,
};
},

methods: {
downloadLink: function (link) {
window.open(link);
},

handleScrollx() {
// console.log(
// "距离顶部高度",
// this.$refs.pronbit.getBoundingClientRect().top
// );
},
},
};
</script>


<style scoped>
.home-style {
width: 100%;
height: 952px;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
overflow: hidden;
}

.home-margin {
width: 1200px;
}

.homeTextStyle {
width: 570px;
height: 100%;
box-sizing: border-box;
/* align-items: center; */
display: flex;
flex-flow: column;
justify-content: center;
animation: animationTitleFont 1.4s ease-in-out forwards;
opacity: 0;
}


@keyframes animationTitleFont {
100% {
opacity: 1;
}
}


.homeImgStyle {
width: 350px;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}

/* .homeImgStyle::after {
content: "";
height: 99px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
width: 100%;
bottom: 0;
z-index: 99;
position: absolute;
left: 0;
} */

.text-titleFont {
font-size: 80px;
font-weight: bold;
color: #333;
line-height: 80px;
letter-spacing: 12px;
}





.text-contentFont {
font-weight: 600;
color: #333333;
font-size: 30px;
line-height: 30px;
letter-spacing: 6px;
margin: 30px 0 40px;
}

.text-contentButton-flex {
display: flex;
}

.button-boxs {
background: #fff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
font-size: 20px;
transition: color 0.25s, background-color 0.25s, box-shado　0.25s;
}
.button-boxs:hover {
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
}

.button-box {
color: var(--text-color);
background: var(--background-color);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: color 0.25s, background-color 0.25s, box-shadow　0.25s;
}

.button-box:hover {
color: var(--text-color-hover);
background: var(--background-color-hover);
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
transition: color 0.35s, background-color 0.35s, box-shadow　0.35s;
}

.codeSvg {
width: 38.59px;
height: 38.59px;
border-radius: 3px;
}

.codeSvg:hover {
color: #fff;
}

.code-button {
width: 72px;
height: 72px;
}

.chang-button {
width: 222px;
box-sizing: border-box;
height: 72px;
margin-right: 19px;
cursor: pointer;
}

.storeSvg {
width: 42px;
height: 42px;
margin-right: 17px;
}

.iphone12 {
width: 100%;
transform: translateY(-300px);
opacity: 0;
animation: fallPerspective 0.8s ease-in-out forwards;
/* position: absolute;
bottom: 0; */
}

@keyframes fallPerspective {
100% {
transform: translateY(0px);
opacity: 1;
}
}

@media screen and (max-width: 1600px) {
.homeImgStyle {
width: 330px;
}
.text-titleFont {
font-size: 70px;
}
}

@media screen and (max-width: 1500px) {
.homeImgStyle {
width: 300px;
position: relative;
}
.text-titleFont {
font-size: 60px;
}
.text-contentFont {
font-size: 26px;
letter-spacing: 4px;
margin: 20px 0 30px;
}
.home-margin {
box-sizing: border-box;
padding: 0 60px;
}
}
</style>
<template>
<div class="home-style" :style="{
background:'url(' + mod.bgImage + ')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}" v-if="mod" id="home-style" ref="pronbit">
<div class="container">
<div class="row justify-content-center">
<div v-if="mod.desc === '左图右文'" class="col-lg-4 col-md-4 col-sm-10 col-10">
<div class="iphone">
<img class="iphone12" :src="mod.mainImage" alt="" />
</div>
</div>
<div v-if="mod.desc === '左图右文'" class="col-lg-1 d-none d-lg-block"></div>
<div class="col-lg-7 col-md-8 col-sm-12">
<div class="center">
<div class="homeTextStyle">
<h1 class="display-1" style="font-weight: bold;margin-top: 8px;">{{ mod.mainText }}</h1>
<h1 style="margin-top: 8px;margin-bottom: 8px;">{{ mod.subText }}</h1>
<div class="text-contentButton-flex row">
<div class="col-sm-5" style="margin-top: 10px;">
<div class=" button-box chang-button top15" :style="getHoversColor"
@click="downloadLink(linkData.iosLink)">
<img class="storeSvg" :src="mod.iosDownloadBtn" alt="" srcset="" />
<div>iPhone下载</div>
</div>
</div>
<div class="col-sm-5" style="margin-top: 10px;">
<div class="button-box chang-button" :style="getHoversColor"
@click="downloadLink(linkData.androidLink)">
<img class="storeSvg" :src="mod.androidDownloadBtn" alt="" srcset="" />
<div>Android下载</div>
</div>
</div>
<el-tooltip class="item" effect="light" placement="bottom">
<template #content>
<qrcode-vue :value="url" :size="140" level="H" />
</template>
<div class="col-sm-2 d-none d-sm-block">
<div class="button-boxs code-button center" style="margin-top: 10px;"
:style="getHoversColor">
<qrcode-vue :value="url" :size="36" level="H" />
</div>
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
<div v-if="mod.desc === '左文右图'" class="col-lg-1 d-none d-lg-block"></div>
<div v-if="mod.desc === '左文右图'" class="col-lg-4 col-md-4 col-sm-10 col-10">
<div class="iphone">
<img class="iphone12" :src="mod.mainImage" alt="" />
</div>
</div>
</div>
</div>
<DefaultBowser ref="bowser"/>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import DefaultBowser from './default-browser.vue'
import {isWxBrowser} from '../utlis/browser.js'
export default {
computed: {
getDescStyle: function() {
return function(value, desc) {
if (desc === "左图右文") {
if (value === "text") {
return "right";
}
if (value === "img") {
return "left";
}
}
if (desc === "左文右图") {
if (value === "text") {
return "left";
}
if (value === "img") {
return "right";
}
}
};
},
getHoversColor: function() {
return {
"--text-color": this.mod.unSelectTextColor,
"--text-color-hover": this.mod.selectTextColor,
"--background-color": this.mod.unSelectBgColor,
"--background-color-hover": this.mod.selectBgColor,
"--box-shadow-color-hover": this.mod.selectBgColor + "4D",
};
},
},
props: {
mod: {
type: Object,
default: () => {},
},
linkData: {
tpye: Object,
default: () => {},
},
},
created() {
window.addEventListener("scroll", this.handleScrollx, true);
},
mounted() {
this.showLinear = true;
this.url = document.URL
console.log(document.URL)
},
components: {
QrcodeVue,
DefaultBowser
},
data() {
return {
codeSvg: false,
showLinear: false,
url: '',
};
},
methods: {
downloadLink: function(link) {
console.log(link, isWxBrowser())
if (isWxBrowser() && link.endsWith('.apk')) {
console.log('请使用默认浏览器打开')
this.$refs.bowser.show()
} else {
window.open(link);
}
},
handleScrollx() {
// console.log(
// "距离顶部高度",
// this.$refs.pronbit.getBoundingClientRect().top
// );
}
},
};
</script>
<style scoped>
.home-style {
width: 100vw;
overflow: hidden;
padding-top: calc(60px + 8vw);
padding-bottom: calc(60px + 8vw);
}
.home-margin {
width: 1200px;
}
.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.homeTextStyle {
width: 100%;
padding-top: 80px;
padding-bottom: 80px;
box-sizing: border-box;
/* align-items: center; */
display: flex;
flex-flow: column;
justify-content: center;
animation: animationTitleFont 1.4s ease-in-out forwards;
opacity: 0;
}
@keyframes animationTitleFont {
100% {
opacity: 1;
}
}
.homeImgStyle {
width: 350px;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
/* .homeImgStyle::after {
content: "";
height: 99px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
width: 100%;
bottom: 0;
z-index: 99;
position: absolute;
left: 0;
} */
.text-contentButton-flex {
margin-top: 8px;
width: 100%;
display: flex;
}
.button-boxs {
background: #fff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
font-size: 20px;
transition: color 0.25s, background-color 0.25s, box-shado 0.25s;
}
.button-boxs:hover {
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
}
.button-box {
color: var(--text-color);
background: var(--background-color);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
/* font-size: 20px; */
transition: color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.button-box:hover {
color: var(--text-color-hover);
background: var(--background-color-hover);
box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
transition: color 0.35s, background-color 0.35s, box-shadow 0.35s;
}
.codeSvg {
width: 38.59px;
height: 38.59px;
border-radius: 3px;
}
.codeSvg:hover {
color: #fff;
}
.code-button {
width: 72px;
height: 72px;
}
.chang-button {
/* width: 222px; */
padding: 12px 24px 12px 12px;
/* margin: 4px 6px 4px 6px; */
box-sizing: border-box;
/* height: 72px; */
/* margin-right: 19px; */
cursor: pointer;
}
.storeSvg {
width: 42px;
height: 42px;
margin-right: 17px;
}
.iphone {
max-height: 600px;
overflow: hidden;
}
.iphone12 {
width: 100%;
height: 100%;
object-fit: scale-down;
}
@keyframes fallPerspective {
100% {
transform: translateY(0px);
opacity: 1;
}
}
</style>

+ 96
- 141
src/components/NavigationBar.vue Voir le fichier

@@ -1,141 +1,96 @@
<template>
<div class="head-view">
<div class="head-left">
<div class="logo-box">
<img :src="mod.applyLogo" style="width: 100%; height: 100%" alt="" />
</div>
<div class="for-item" v-for="(item, index) in mod.listStyle" :key="index">
<a :href="item.url" :style="colorHover(item)" target="_blank">{{
item.name
}}</a>
</div>
</div>
<!--
<div class="head-right">
<div class="myTou-box">
<img
src="../assets/png/touxiang.png "
style="width: 100%; height: 100%"
alt=""
/>
</div>
<div class="for-item">未登录</div>
</div> -->
</div>
</template>

<script>
export default {
props: {
mod: {
type: Object,
default: () => {},
},
},
computed: {
colorHover() {
return function (data) {
return {
"--text-color": data.unSelectColor,
"--text-color-hover": data.selectColor,
};
};
},
},

data() {
return {
headList: [
{
name: "智莺",
id: 1,
},
{
name: "方案解决",
id: 2,
},
{
name: "功能特色",
id: 3,
},
{
name: " 智莺联盟",
id: 4,
},
],
};
},
};
</script>

<style scoped>
.head-view {
height: 76px;
display: flex;
align-items: center;
padding: 18px 0;
position: absolute;
width: 1200px;
margin: 0 auto;
left: 0;
z-index: 99;
box-sizing: border-box;
right: 0;
}

.head-left {
margin-right: auto;
display: flex;
align-items: center;
font-weight: 500;
}

.head-right {
display: flex;
align-items: center;
font-weight: 500;
cursor: pointer;
}

.logo-box {
width: 40px;
height: 40px;
border-radius: 50%;

margin-right: 30px;
cursor: pointer;
overflow: hidden;
}

.myTou-box {
width: 36px;
height: 36px;
border-radius: 50%;
margin-right: 12px;
}

.for-item {
font-size: 18px;
margin-right: 40px;
cursor: pointer;
}

.for-item:last-child {
margin-right: 0;
}

a {
color: var(--text-color);
text-decoration: none;
}

a:hover {
color: var(--text-color-hover);
}

@media screen and (max-width: 1500px) {
.head-view {
padding: 18px 60px;
}
}
</style>
<template>
<nav class="navbar navbar-expand-lg navbar-light sticky" style="background-color: white;">
<div class="container container-fluid">
<div class="logo-box"><img :src="mod.applyLogo" style="width: 100%; height: 100%" alt="" /></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li v-for="(item, index) in mod.listStyle" :key="index" class="nav-item">
<a class="title" :style="colorHover(item)" :href="item.url" target="_blank">{{item.name}}</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
export default {
props: {
mod: {
type: Object,
default: () => {},
},
},
computed: {
colorHover() {
return function(data) {
return {
"--text-color": data.unSelectColor,
"--text-color-hover": data.selectColor,
};
};
},
},
data() {
return {
headList: [{
name: "智莺",
id: 1,
},
{
name: "方案解决",
id: 2,
},
{
name: "功能特色",
id: 3,
},
{
name: " 智莺联盟",
id: 4,
},
],
};
},
};
</script>
<style scoped>
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 200;
}
.logo-box {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}
a {
color: var(--text-color);
text-decoration: none;
}
a:hover {
color: var(--text-color-hover);
}
.title {
display: block;
padding: 0.5rem 1rem;
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
</style>

+ 67
- 0
src/components/default-browser.vue Voir le fichier

@@ -0,0 +1,67 @@
<template>
<div v-if="isShow" class="wxtip" id="JweixinTip">
<img class="wxtip-icon" src="../assets/share.png"/>>
<p class="wxtip-txt">点击右上角<br />选择在浏览器中打开</p>
<p class="button" @click="isShow = false">我知道了</p>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
}
},
methods: {
show() {
this.isShow = true
}
}
}
</script>
<style scoped>
.wxtip {
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 998;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.wxtip-icon {
width: 52px;
height: 67px;
position: absolute;
right: 20px;
top: 20px;
}
.wxtip-txt {
margin-top: 107px;
color: #fff;
font-size: 16px;
padding: 20px;
border: 2px dashed #666;
border-radius: 120px;
}
.button {
margin-top: 107px;
color: #fff;
font-size: 16px;
padding: 4px 12px 4px 12px;
border: 2px solid #666;
border-radius: 120px;
}
</style>

+ 8
- 1
src/main.js Voir le fichier

@@ -7,7 +7,12 @@ import store from './store' // 引入 vuex


import ElementPlus from 'element-plus';
import '/@modules/element-plus/lib/theme-chalk/index.css';
import 'element-plus/dist/index.css'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import BootstrapVue3 from 'bootstrap-vue-3'



const app = createApp(App)
@@ -15,4 +20,6 @@ const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
app.use(store) // 使用 vuex
app.use(route)
app.use(BootstrapVue3)
app.mount('#app')


+ 8
- 0
src/utlis/browser.js Voir le fichier

@@ -0,0 +1,8 @@
export const isWxBrowser = () => {
let ua = window.navigator.userAgent.toLowerCase();
console.log(ua)
if(ua.indexOf('micromessenger') >= 0){
return true
}
return false
}

+ 104
- 107
src/views/index.vue Voir le fichier

@@ -1,107 +1,104 @@
<template>
<div class="box">
<div v-for="(item, index) in modelData" :key="index">
<NavigationBar v-if="item.moduleKey === 'topNavCss'" :mod="item" />
<HomeStyle
v-if="item.moduleKey === 'first'"
:mod="item"
:linkData="{
iosLink: modeInit.iosStoreLink,
androidLink: modeInit.androidStoreLink,
}"
/>
<ContentDesign v-if="item.moduleKey === 'part'" :mod="item" />
<DownloadStyle
v-if="item.moduleKey === 'download'"
:mod="item"
:linkData="{
iosLink: modeInit.iosStoreLink,
androidLink: modeInit.androidStoreLink,
}"
/>
</div>
</div>
<footer class="footer">
<div style="margin-bottom: 10px; white-space: pre-line">
<a target="_blank" :href="modeInit.websiteMomeLink" class="footer-a">{{
modeInit.websiteMome
}}</a>
</div>
</footer>
</template>

<script>
import NavigationBar from "../components/NavigationBar.vue";
import HomeStyle from "../components/HomeStyle.vue";
import ContentDesign from "../components/ContentDesign.vue";
import DownloadStyle from "../components/Download.vue";

// aixos
import request from "../utlis/utlis";

export default {
data() {
return {
modelData: [],
modeInit: {},
};
},
components: {
NavigationBar,
HomeStyle,
ContentDesign,
DownloadStyle,
},
mounted() {
request({
url: "/api/v1/mod/pub.flutter.web_download_page",
}).then((res) => {
this.modelData = JSON.parse(res.data.mod_list[0].data).moduleList;
this.modeInit = JSON.parse(res.data.mod_list[0].data);

// 设置title 和 网页小角标
document.title = this.modeInit.title;
var link =
document.querySelector("link[rel*='icon']") ||
document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = this.modeInit.icon;
document.getElementsByTagName("head")[0].appendChild(link);
});

this.$nextTick(() => {
// 禁用右键
document.oncontextmenu = new Function("event.returnValue=false");
// 禁用选择
document.onselectstart = new Function("event.returnValue=false");
});
},
};
</script>


<style scoped>
.box {
padding-bottom: 50px;
border: 1px solid #f2f2f2;
margin-bottom: 20px;
}

.footer {
padding-bottom: 68px;
display: flex;
align-items: center;
flex-flow: column;
color: #666666;
font-size: 14px;
}

.footer-a {
text-align: center;
display: flex;
text-decoration: none;
color: #666666;
line-height: 30px;
}
</style>
<template>
<div class="box">
<div v-for="(item, index) in modelData" :key="index">
<template v-if="item.isShow === '1'">
<NavigationBar v-if="item.moduleKey === 'topNavCss'" :mod="item" />
<HomeStyle v-if="item.moduleKey === 'first'" :mod="item" :linkData="{
iosLink: modeInit.iosStoreLink,
androidLink: modeInit.androidStoreLink,
}" />
<ContentDesign v-if="item.moduleKey === 'part'" :mod="item" />
<DownloadStyle v-if="item.moduleKey === 'download'" :mod="item" :linkData="{
iosLink: modeInit.iosStoreLink,
androidLink: modeInit.androidStoreLink,
}" />
</template>
</div>
</div>
<footer class="footer">
<div style="margin-bottom: 10px; white-space: pre-line">
<a target="_blank" :href="modeInit.websiteMomeLink" class="footer-a">{{
modeInit.websiteMome
}}</a>
</div>
</footer>
</template>
<script>
import NavigationBar from "../components/NavigationBar.vue";
import HomeStyle from "../components/HomeStyle.vue";
import ContentDesign from "../components/ContentDesign.vue";
import DownloadStyle from "../components/Download.vue";
// aixos
import request from "../utlis/utlis";
export default {
data() {
return {
modelData: [],
modeInit: {},
};
},
components: {
NavigationBar,
HomeStyle,
ContentDesign,
DownloadStyle,
},
mounted() {
request({
url: "/api/v1/mod/pub.flutter.web_download_page",
}).then((res) => {
this.modelData = JSON.parse(res.data.mod_list[0].data).moduleList;
this.modeInit = JSON.parse(res.data.mod_list[0].data);
// 设置title 和 网页小角标
document.title = this.modeInit.title;
var link =
document.querySelector("link[rel*='icon']") ||
document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = this.modeInit.icon;
document.getElementsByTagName("head")[0].appendChild(link);
});
this.$nextTick(() => {
// 禁用右键
document.oncontextmenu = new Function("event.returnValue=false");
// 禁用选择
document.onselectstart = new Function("event.returnValue=false");
});
},
};
</script>
<style scoped>
.box {
padding-bottom: 50px;
/* border: 1px solid #f2f2f2; */
margin-bottom: 20px;
}
.footer {
padding-bottom: 68px;
display: flex;
align-items: center;
flex-flow: column;
color: #666666;
font-size: 14px;
}
.footer-a {
text-align: center;
display: flex;
text-decoration: none;
color: #666666;
line-height: 30px;
}
</style>

+ 17
- 13
vite.config.js Voir le fichier

@@ -1,14 +1,18 @@
const path = require('path')
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

module.exports = {
hostname: '0.0.0.0',
port: 8080,
// 反向代理
proxy: {
'/api': {
target: 'https://inapi.izhyin.cn/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: true,

proxy: {
'/api': {
target: 'http://inapi.izhyin.cn/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
},
}
})

Écrire Aperçu
Chargement…
Annuler
Enregistrer