zhanghuiqing
/
--Pc-ClientWeb-Qing
1
0
Çatalla 0
Kod Konular 0 Değişiklik İstekleri 0 Sürümler 1 Wiki Aktivite
Kaynağa Gözat

PC端站长后台管理1.0.0

tags/1.0.0
Eddie 3 yıl önce
işleme
1157dd4b69
39 değiştirilmiş dosya ile 4664 ekleme ve 0 silme
Görünümü Böl
Diff Seçenekleri
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir
  1. +5
    -0
      .gitignore
  2. +25
    -0
      index.html
  3. +3138
    -0
      package-lock.json
  4. +21
    -0
      package.json
  5. +13
    -0
      src/App.vue
  6. BIN
     
  7. BIN
     
  8. BIN
     
  9. BIN
     
  10. BIN
     
  11. +17
    -0
      src/assets/svg/1.svg
  12. +9
    -0
      src/assets/svg/2.svg
  13. +9
    -0
      src/assets/svg/3.svg
  14. +17
    -0
      src/assets/svg/4.svg
  15. +17
    -0
      src/assets/svg/5.svg
  16. +17
    -0
      src/assets/svg/6.svg
  17. +9
    -0
      src/assets/svg/88.svg
  18. +55
    -0
      src/assets/svg/android.svg
  19. +23
    -0
      src/assets/svg/app-store-1.svg
  20. +13
    -0
      src/assets/svg/code-2.svg
  21. +13
    -0
      src/assets/svg/code.svg
  22. +47
    -0
      src/assets/svg/google-play-store.svg
  23. +37
    -0
      src/assets/svg/ihone-2.svg
  24. +38
    -0
      src/assets/svg/iphone-1.svg
  25. +272
    -0
      src/components/ContentDesign.vue
  26. +234
    -0
      src/components/Download.vue
  27. +264
    -0
      src/components/HomeStyle.vue
  28. +134
    -0
      src/components/NavigationBar.vue
  29. +0
    -0
     
  30. +18
    -0
      src/main.js
  31. +21
    -0
      src/route/index.js
  32. +2
    -0
      src/store/actions.js
  33. +3
    -0
      src/store/getters.js
  34. +10
    -0
      src/store/index.js
  35. +2
    -0
      src/store/mutations.js
  36. +5
    -0
      src/store/state.js
  37. +55
    -0
      src/utlis/utlis.js
  38. +107
    -0
      src/views/index.vue
  39. +14
    -0
      vite.config.js

+ 5
- 0
.gitignore Dosyayı Görüntüle

@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

+ 25
- 0
index.html Dosyayı Görüntüle

@@ -0,0 +1,25 @@
<!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>
</html>

+ 3138
- 0
package-lock.json
Dosya farkı çok büyük olduğundan ihmal edildi
Dosyayı Görüntüle


+ 21
- 0
package.json Dosyayı Görüntüle

@@ -0,0 +1,21 @@
{
"name": "ClientHomeWeb",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"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"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.4",
"vite": "^1.0.0-rc.13",
"vite-plugin-style-import": "^1.0.0"
}
}

+ 13
- 0
src/App.vue Dosyayı Görüntüle

@@ -0,0 +1,13 @@
<template>
<router-view />
</template>

<script>

export default {
name: 'App',
}
</script>



BIN
Dosyayı Görüntüle


BIN
Dosyayı Görüntüle


BIN
Dosyayı Görüntüle


BIN
Dosyayı Görüntüle


BIN
Dosyayı Görüntüle


+ 17
- 0
src/assets/svg/1.svg Dosyayı Görüntüle

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="952px" viewBox="0 0 1920 952" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 6</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#DEF3FF" offset="51.1828016%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景">
<rect id="矩形" fill="#FFFFFF" x="0" y="816" width="1920" height="3880"></rect>
<rect id="蒙版" fill="url(#linearGradient-1)" x="0" y="0" width="1920" height="952"></rect>
</g>
</g>
</svg>

+ 9
- 0
src/assets/svg/2.svg Dosyayı Görüntüle

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="339px" viewBox="0 0 1920 339" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 7</title>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(0.000000, -952.000000)" fill="#FFFFFF">
<rect id="矩形" x="0" y="816" width="1920" height="3880"></rect>
</g>
</g>
</svg>

+ 9
- 0
src/assets/svg/3.svg Dosyayı Görüntüle

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="640px" viewBox="0 0 1920 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 8</title>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(0.000000, -1291.000000)" fill="#FFFFFF">
<rect id="矩形" x="0" y="816" width="1920" height="3880"></rect>
</g>
</g>
</svg>

+ 17
- 0
src/assets/svg/4.svg Dosyayı Görüntüle

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="640px" viewBox="0 0 1920 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 9</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E7F3FF" offset="51.8657124%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(0.000000, -2571.000000)">
<rect id="矩形" fill="#FFFFFF" x="0" y="816" width="1920" height="3880"></rect>
<rect id="蒙版" fill="url(#linearGradient-1)" x="0" y="2218" width="1920" height="1633"></rect>
</g>
</g>
</svg>

+ 17
- 0
src/assets/svg/5.svg Dosyayı Görüntüle

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="640px" viewBox="0 0 1920 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 10</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E7F3FF" offset="51.8657124%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(0.000000, -3211.000000)">
<rect id="矩形" fill="#FFFFFF" x="0" y="816" width="1920" height="3880"></rect>
<rect id="蒙版" fill="url(#linearGradient-1)" x="0" y="2218" width="1920" height="1633"></rect>
</g>
</g>
</svg>

+ 17
- 0
src/assets/svg/6.svg Dosyayı Görüntüle

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="640px" viewBox="0 0 1920 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro + iPhone 12 Pro 蒙版备份 11</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#E7F3FF" offset="51.8657124%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(0.000000, -1931.000000)">
<rect id="矩形" fill="#FFFFFF" x="0" y="816" width="1920" height="3880"></rect>
<rect id="蒙版" fill="url(#linearGradient-1)" x="0" y="2218" width="1920" height="1633"></rect>
</g>
</g>
</svg>

+ 9
- 0
src/assets/svg/88.svg Dosyayı Görüntüle

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200px" height="540px" viewBox="0 0 1200 540" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>蒙版</title>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="下载背景" transform="translate(-360.000000, -4017.000000)" fill="#F7F7F7">
<rect id="蒙版" x="360" y="4017" width="1200" height="540" rx="24"></rect>
</g>
</g>
</svg>

+ 55
- 0
src/assets/svg/android.svg Dosyayı Görüntüle

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="222px" height="72px" viewBox="0 0 222 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63 (92445) - https://sketch.com -->
<title>编组 6</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="42" height="42" rx="21"></rect>
<linearGradient x1="0%" y1="50.0198663%" x2="100.017577%" y2="50.0198663%" id="linearGradient-3">
<stop stop-color="#63BE6B" offset="0%"></stop>
<stop stop-color="#5BBC6A" offset="50.6%"></stop>
<stop stop-color="#4AB96A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="-0.0266963293%" y1="50.0120145%" x2="99.942158%" y2="50.0120145%" id="linearGradient-4">
<stop stop-color="#3EC6F2" offset="0%"></stop>
<stop stop-color="#45AFE3" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0.0420683611%" y1="50.0367394%" x2="99.9894829%" y2="50.0367394%" id="linearGradient-5">
<stop stop-color="#FAA51A" offset="0%"></stop>
<stop stop-color="#FAB716" offset="38.7%"></stop>
<stop stop-color="#FAC412" offset="74.1%"></stop>
<stop stop-color="#FAC80F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0.0162601626%" y1="49.9983515%" x2="99.9985218%" y2="49.9983515%" id="linearGradient-6">
<stop stop-color="#EC3B50" offset="0%"></stop>
<stop stop-color="#E7515B" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能1" transform="translate(-1231.000000, -549.000000)">
<g id="编组-7" transform="translate(1231.000000, 549.000000)">
<g id="编组-6">
<rect id="矩形备份" fill="#FFFFFF" x="0" y="0" width="222" height="72" rx="10"></rect>
<text id="Android下载" font-family="PingFangSC-Medium, PingFang SC" font-size="20" font-weight="400" fill="#333333">
<tspan x="74" y="43">Android下载</tspan>
</text>
<g id="google-play-store" transform="translate(15.000000, 15.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#D8D8D8" xlink:href="#path-1"></use>
<rect id="矩形" fill="#FFFFFF" mask="url(#mask-2)" x="-3" y="0" width="48" height="43"></rect>
<g mask="url(#mask-2)" fill-rule="nonzero" id="路径">
<g transform="translate(13.000000, 9.000000)">
<path d="M14,7.61983293 L0.802445548,0.0696672068 C0.636606802,-0.0267178876 0.427970959,-0.0213631601 0.267481849,0.0750219343 C0.101643103,0.171407029 3.491131e-16,0.342758308 3.491131e-16,0.535528496 C3.491131e-16,0.535528496 -0.00534963699,1.85408832 -3.20464141e-14,3 L9.39490019,12.5 L14,7.61983293 Z" fill="url(#linearGradient-3)"></path>
<path d="M0,3 C0.0166852058,7.09835149 0.0667408231,17.0469405 0.0889877642,22 L10,12.5398156 L0,3 Z" fill="url(#linearGradient-4)"></path>
<path d="M21.7318142,12.1693456 L14,7.61983293 L9.62399694,12 L14.8588957,17 L21.7370727,13.0631458 C21.9000876,12.9701493 22,12.7996556 22,12.6188289 C22,12.4328358 21.8948291,12.2623421 21.7318142,12.1693456 Z" fill="url(#linearGradient-5)"></path>
<path d="M0,21.5417268 C0.0110864745,23.3257779 0.0166297118,24.4669277 0.0166297118,24.4669277 C0.0166297118,24.6597981 0.12195122,24.8365959 0.293791574,24.9276736 C0.465631929,25.0241088 0.676274945,25.0241088 0.848115299,24.9276736 L15,16.95034 L9.62399694,12 L0,21.5417268 Z" fill="url(#linearGradient-6)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

+ 23
- 0
src/assets/svg/app-store-1.svg Dosyayı Görüntüle

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>app-store-1</title>
<defs>
<rect id="path-1" x="0" y="0" width="42" height="42" rx="21"></rect>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能" transform="translate(-375.000000, -564.000000)">
<g id="编组-8" transform="translate(360.000000, 549.000000)">
<g id="app-store-1" transform="translate(15.000000, 15.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#D8D8D8" xlink:href="#path-1"></use>
<g mask="url(#mask-2)" fill-rule="nonzero">
<polygon id="路径" fill="#FEFFFF" points="0 0 42 0 42 42 0 42"></polygon>
<path d="M14.2838412,30.5964308 L14.2876926,30.5976654 L12.8871379,33.060054 C12.3759214,33.9588873 11.2435831,34.2668659 10.3580962,33.747903 C9.4726498,33.2290225 9.16924425,32.079617 9.68046071,31.1807836 L10.7122179,29.3668209 L10.811218,29.1927496 C10.9880559,28.9346879 11.4244345,28.4895098 12.2973133,28.573171 C12.2973133,28.573171 14.3513818,28.7994637 14.5000035,29.8831501 C14.500044,29.8831501 14.5203143,30.2397699 14.2838412,30.5964308 L14.2838412,30.5964308 Z M34.1486343,24.3071076 L29.7811593,24.3071076 C29.4837537,24.2869021 29.3538212,24.1790849 29.3028617,24.116411 L29.2996185,24.110691 L24.6243596,15.8909048 L24.618319,15.8950199 L24.3379,15.4869195 C23.8784133,14.7736387 23.1487237,16.5980128 23.1487237,16.5980128 C22.2775071,18.6308609 23.2723319,20.9421408 23.6192375,21.6406893 L30.1128621,33.0575026 C30.624038,33.9563359 31.7563764,34.2643145 32.6418633,33.7453516 C33.5273097,33.2264711 33.8307152,32.0770656 33.3194988,31.1782322 L31.6956872,28.3233808 C31.6642682,28.2542461 31.609498,28.066389 31.9424981,28.0656483 L34.1486343,28.0656483 C35.1711077,28.0656483 36,27.2242626 36,26.1863779 C36,25.1484933 35.1711077,24.3071076 34.1486343,24.3071076 Z M25.6656033,26.8619227 C25.6656033,26.8619227 25.8987115,28.0656483 24.9966841,28.0656483 L24.0946566,28.0656483 L24.0946566,28.0656483 L8.85136573,28.0656483 C7.82889228,28.0656483 7,27.2242626 7,26.1863779 C7,25.1484933 7.82889228,24.3071076 8.85136573,24.3071076 L13.0021514,24.3071076 C13.6722869,24.2676843 13.8311653,23.8750157 13.8311653,23.8750157 L13.834814,23.8769087 L19.2529787,14.3508883 L19.2513571,14.3505591 C19.3501544,14.1665291 19.2678976,13.9926635 19.2535868,13.9651331 L17.4642481,10.8192164 C16.9529911,9.92038302 17.2563967,8.77101869 18.1418836,8.25209695 C19.0273705,7.73313406 20.1596278,8.04111267 20.6708847,8.93994603 L21.50075,10.3990173 L22.3291558,8.94253858 C22.8403722,8.04370523 23.9726701,7.73572661 24.858157,8.2546895 C25.7436439,8.7736524 26.0470494,9.92301672 25.5357924,10.8218089 L17.9962619,24.0774405 C17.9633024,24.1581388 17.9532078,24.2848034 18.1984782,24.3071076 L22.7051695,24.3071076 L22.7061425,24.3516748 C22.7061425,24.3516748 25.3108734,24.3928264 25.6656033,26.8619227 Z" id="形状" fill="#1890FF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

+ 13
- 0
src/assets/svg/code-2.svg Dosyayı Görüntüle

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="39px" height="39px" viewBox="0 0 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能" transform="translate(-859.000000, -565.000000)" fill="#FFF" fill-rule="nonzero">
<g id="编组-7" transform="translate(601.000000, 549.000000)">
<g id="编组" transform="translate(258.000000, 16.000000)">
<path d="M0.0179814531,18.1857836 L18.1781542,18.1857836 L18.1781542,0.0256547832 L0.0179814531,0.0256547832 L0.0179814531,18.1857836 Z M4.5580576,4.56568699 L13.638122,4.56568699 L13.638122,13.6457514 L4.5580576,13.6457514 L4.5580576,4.56568699 Z M20.4481923,0.0256547832 L20.4481923,18.1858276 L38.6083651,18.1858276 L38.6083651,0.0256547832 L20.4481923,0.0256547832 Z M34.0682889,13.6457514 L24.9882245,13.6457514 L24.9882245,4.56568699 L34.0682889,4.56568699 L34.0682889,13.6457514 Z M6.82805173,11.3757573 L11.3680839,11.3757573 L11.3680839,6.83568112 L6.82805173,6.83568112 L6.82805173,11.3757573 Z M0.0179814531,38.6159944 L18.1781542,38.6159944 L18.1781542,20.4558217 L0.0179814531,20.4558217 L0.0179814531,38.6159944 Z M4.5580576,24.9958539 L13.638122,24.9958539 L13.638122,34.0759183 L4.5580576,34.0759183 L4.5580576,24.9958539 Z M31.7982947,6.83568112 L27.2582186,6.83568112 L27.2582186,11.3757133 L31.7982947,11.3757133 L31.7982947,6.83568112 L31.7982947,6.83568112 Z M20.4481923,38.6159944 L24.9882245,38.6159944 L24.9882245,34.0759622 L20.4481923,34.0759622 L20.4481923,38.6159944 Z M24.9882245,24.9958539 L24.9882245,34.0759183 L29.5282567,34.0759183 L29.5282567,24.9958539 L24.9882245,24.9958539 Z M34.0682889,34.0759622 L29.5282567,34.0759622 L29.5282567,38.6159944 L38.6083211,38.6159944 L38.6083211,29.5358861 L34.0682889,29.5358861 L34.0682889,34.0759622 Z M34.0682889,24.9958539 L38.6083211,24.9958539 L38.6083211,20.4558217 L34.0682889,20.4558217 L34.0682889,24.9958539 Z M20.4481923,20.4558217 L20.4481923,24.9958539 L24.9882245,24.9958539 L24.9882245,20.4558217 L20.4481923,20.4558217 Z M6.82805173,31.8059242 L11.3680839,31.8059242 L11.3680839,27.265892 L6.82805173,27.265892 L6.82805173,31.8059242 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>

+ 13
- 0
src/assets/svg/code.svg Dosyayı Görüntüle

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="39px" height="39px" viewBox="0 0 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能" transform="translate(-859.000000, -565.000000)" fill="#333333" fill-rule="nonzero">
<g id="编组-7" transform="translate(601.000000, 549.000000)">
<g id="编组" transform="translate(258.000000, 16.000000)">
<path d="M0.0179814531,18.1857836 L18.1781542,18.1857836 L18.1781542,0.0256547832 L0.0179814531,0.0256547832 L0.0179814531,18.1857836 Z M4.5580576,4.56568699 L13.638122,4.56568699 L13.638122,13.6457514 L4.5580576,13.6457514 L4.5580576,4.56568699 Z M20.4481923,0.0256547832 L20.4481923,18.1858276 L38.6083651,18.1858276 L38.6083651,0.0256547832 L20.4481923,0.0256547832 Z M34.0682889,13.6457514 L24.9882245,13.6457514 L24.9882245,4.56568699 L34.0682889,4.56568699 L34.0682889,13.6457514 Z M6.82805173,11.3757573 L11.3680839,11.3757573 L11.3680839,6.83568112 L6.82805173,6.83568112 L6.82805173,11.3757573 Z M0.0179814531,38.6159944 L18.1781542,38.6159944 L18.1781542,20.4558217 L0.0179814531,20.4558217 L0.0179814531,38.6159944 Z M4.5580576,24.9958539 L13.638122,24.9958539 L13.638122,34.0759183 L4.5580576,34.0759183 L4.5580576,24.9958539 Z M31.7982947,6.83568112 L27.2582186,6.83568112 L27.2582186,11.3757133 L31.7982947,11.3757133 L31.7982947,6.83568112 L31.7982947,6.83568112 Z M20.4481923,38.6159944 L24.9882245,38.6159944 L24.9882245,34.0759622 L20.4481923,34.0759622 L20.4481923,38.6159944 Z M24.9882245,24.9958539 L24.9882245,34.0759183 L29.5282567,34.0759183 L29.5282567,24.9958539 L24.9882245,24.9958539 Z M34.0682889,34.0759622 L29.5282567,34.0759622 L29.5282567,38.6159944 L38.6083211,38.6159944 L38.6083211,29.5358861 L34.0682889,29.5358861 L34.0682889,34.0759622 Z M34.0682889,24.9958539 L38.6083211,24.9958539 L38.6083211,20.4558217 L34.0682889,20.4558217 L34.0682889,24.9958539 Z M20.4481923,20.4558217 L20.4481923,24.9958539 L24.9882245,24.9958539 L24.9882245,20.4558217 L20.4481923,20.4558217 Z M6.82805173,31.8059242 L11.3680839,31.8059242 L11.3680839,27.265892 L6.82805173,27.265892 L6.82805173,31.8059242 Z" id="形状"></path>
</g>
</g>
</g>
</g>
</svg>

+ 47
- 0
src/assets/svg/google-play-store.svg Dosyayı Görüntüle

@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>google-play-store</title>
<defs>
<rect id="path-1" x="0" y="0" width="42" height="42" rx="21"></rect>
<linearGradient x1="0%" y1="50.0198663%" x2="100.017577%" y2="50.0198663%" id="linearGradient-3">
<stop stop-color="#63BE6B" offset="0%"></stop>
<stop stop-color="#5BBC6A" offset="50.6%"></stop>
<stop stop-color="#4AB96A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="-0.0266963293%" y1="50.0120145%" x2="99.942158%" y2="50.0120145%" id="linearGradient-4">
<stop stop-color="#3EC6F2" offset="0%"></stop>
<stop stop-color="#45AFE3" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0.0420683611%" y1="50.0367394%" x2="99.9894829%" y2="50.0367394%" id="linearGradient-5">
<stop stop-color="#FAA51A" offset="0%"></stop>
<stop stop-color="#FAB716" offset="38.7%"></stop>
<stop stop-color="#FAC412" offset="74.1%"></stop>
<stop stop-color="#FAC80F" offset="100%"></stop>
</linearGradient>
<linearGradient x1="0.0162601626%" y1="49.9983515%" x2="99.9985218%" y2="49.9983515%" id="linearGradient-6">
<stop stop-color="#EC3B50" offset="0%"></stop>
<stop stop-color="#E7515B" offset="100%"></stop>
</linearGradient>
</defs>
<g id="下载页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能" transform="translate(-616.000000, -564.000000)">
<g id="编组-7" transform="translate(601.000000, 549.000000)">
<g id="google-play-store" transform="translate(15.000000, 15.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#D8D8D8" xlink:href="#path-1"></use>
<rect id="矩形" fill="#FFFFFF" mask="url(#mask-2)" x="-3" y="0" width="48" height="43"></rect>
<g mask="url(#mask-2)" fill-rule="nonzero" id="路径">
<g transform="translate(13.000000, 9.000000)">
<path d="M14,7.61983293 L0.802445548,0.0696672068 C0.636606802,-0.0267178876 0.427970959,-0.0213631601 0.267481849,0.0750219343 C0.101643103,0.171407029 3.491131e-16,0.342758308 3.491131e-16,0.535528496 C3.491131e-16,0.535528496 -0.00534963699,1.85408832 -3.20464141e-14,3 L9.39490019,12.5 L14,7.61983293 Z" fill="url(#linearGradient-3)"></path>
<path d="M0,3 C0.0166852058,7.09835149 0.0667408231,17.0469405 0.0889877642,22 L10,12.5398156 L0,3 Z" fill="url(#linearGradient-4)"></path>
<path d="M21.7318142,12.1693456 L14,7.61983293 L9.62399694,12 L14.8588957,17 L21.7370727,13.0631458 C21.9000876,12.9701493 22,12.7996556 22,12.6188289 C22,12.4328358 21.8948291,12.2623421 21.7318142,12.1693456 Z" fill="url(#linearGradient-5)"></path>
<path d="M0,21.5417268 C0.0110864745,23.3257779 0.0166297118,24.4669277 0.0166297118,24.4669277 C0.0166297118,24.6597981 0.12195122,24.8365959 0.293791574,24.9276736 C0.465631929,25.0241088 0.676274945,25.0241088 0.848115299,24.9276736 L15,16.95034 L9.62399694,12 L0,21.5417268 Z" fill="url(#linearGradient-6)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

+ 37
- 0
src/assets/svg/ihone-2.svg Dosyayı Görüntüle

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="222px" height="72px" viewBox="0 0 222 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63 (92445) - https://sketch.com -->
<title>编组 8</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="42" height="42" rx="21"></rect>
<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-3">
<stop stop-color="#1D76F2" offset="0%"></stop>
<stop stop-color="#1AC2FB" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能1" transform="translate(-1074.000000, -2312.000000)">
<g id="编组-3" transform="translate(215.000000, 1963.000000)">
<g id="编组-5" transform="translate(859.000000, 195.000000)">
<g id="编组-8" transform="translate(0.000000, 154.000000)">
<rect id="矩形" fill="#FFFFFF" x="0" y="0" width="222" height="72" rx="10"></rect>
<text id="IPhone下载" font-family="PingFangSC-Regular, PingFang SC" font-size="20" font-weight="normal" fill="#333333">
<tspan x="74" y="43">IPhone下载</tspan>
</text>
<g id="app-store-1" transform="translate(15.000000, 15.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#D8D8D8" xlink:href="#path-1"></use>
<g mask="url(#mask-2)" fill-rule="nonzero">
<polygon id="路径" fill="url(#linearGradient-3)" points="0 0 42 0 42 42 0 42"></polygon>
<path d="M14.2838412,30.5964308 L14.2876926,30.5976654 L12.8871379,33.060054 C12.3759214,33.9588873 11.2435831,34.2668659 10.3580962,33.747903 C9.4726498,33.2290225 9.16924425,32.079617 9.68046071,31.1807836 L10.7122179,29.3668209 L10.811218,29.1927496 C10.9880559,28.9346879 11.4244345,28.4895098 12.2973133,28.573171 C12.2973133,28.573171 14.3513818,28.7994637 14.5000035,29.8831501 C14.500044,29.8831501 14.5203143,30.2397699 14.2838412,30.5964308 L14.2838412,30.5964308 Z M34.1486343,24.3071076 L29.7811593,24.3071076 C29.4837537,24.2869021 29.3538212,24.1790849 29.3028617,24.116411 L29.2996185,24.110691 L24.6243596,15.8909048 L24.618319,15.8950199 L24.3379,15.4869195 C23.8784133,14.7736387 23.1487237,16.5980128 23.1487237,16.5980128 C22.2775071,18.6308609 23.2723319,20.9421408 23.6192375,21.6406893 L30.1128621,33.0575026 C30.624038,33.9563359 31.7563764,34.2643145 32.6418633,33.7453516 C33.5273097,33.2264711 33.8307152,32.0770656 33.3194988,31.1782322 L31.6956872,28.3233808 C31.6642682,28.2542461 31.609498,28.066389 31.9424981,28.0656483 L34.1486343,28.0656483 C35.1711077,28.0656483 36,27.2242626 36,26.1863779 C36,25.1484933 35.1711077,24.3071076 34.1486343,24.3071076 Z M25.6656033,26.8619227 C25.6656033,26.8619227 25.8987115,28.0656483 24.9966841,28.0656483 L24.0946566,28.0656483 L24.0946566,28.0656483 L8.85136573,28.0656483 C7.82889228,28.0656483 7,27.2242626 7,26.1863779 C7,25.1484933 7.82889228,24.3071076 8.85136573,24.3071076 L13.0021514,24.3071076 C13.6722869,24.2676843 13.8311653,23.8750157 13.8311653,23.8750157 L13.834814,23.8769087 L19.2529787,14.3508883 L19.2513571,14.3505591 C19.3501544,14.1665291 19.2678976,13.9926635 19.2535868,13.9651331 L17.4642481,10.8192164 C16.9529911,9.92038302 17.2563967,8.77101869 18.1418836,8.25209695 C19.0273705,7.73313406 20.1596278,8.04111267 20.6708847,8.93994603 L21.50075,10.3990173 L22.3291558,8.94253858 C22.8403722,8.04370523 23.9726701,7.73572661 24.858157,8.2546895 C25.7436439,8.7736524 26.0470494,9.92301672 25.5357924,10.8218089 L17.9962619,24.0774405 C17.9633024,24.1581388 17.9532078,24.2848034 18.1984782,24.3071076 L22.7051695,24.3071076 L22.7061425,24.3516748 C22.7061425,24.3516748 25.3108734,24.3928264 25.6656033,26.8619227 Z" id="形状" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

+ 38
- 0
src/assets/svg/iphone-1.svg Dosyayı Görüntüle

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="282px" height="132px" viewBox="0 0 282 132" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 63 (92445) - https://sketch.com -->
<title>编组 8</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="222" height="72" rx="10"></rect>
<filter x="-20.7%" y="-61.1%" width="141.4%" height="227.8%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.0941176471 0 0 0 0 0.564705882 0 0 0 0 1 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<rect id="path-3" x="0" y="0" width="42" height="42" rx="21"></rect>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="智莺导购功能1" transform="translate(-960.000000, -521.000000)">
<g id="编组-8" transform="translate(990.000000, 549.000000)">
<g id="矩形">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#1890FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<text id="IPhone下载" font-family="PingFangSC-Medium, PingFang SC" font-size="20" font-weight="400" fill="#FFFFFF">
<tspan x="74" y="43">IPhone下载</tspan>
</text>
<g id="app-store-1" transform="translate(15.000000, 15.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="蒙版" fill="#D8D8D8" xlink:href="#path-3"></use>
<g mask="url(#mask-4)" fill-rule="nonzero">
<polygon id="路径" fill="#FEFFFF" points="0 0 42 0 42 42 0 42"></polygon>
<path d="M14.2838412,30.5964308 L14.2876926,30.5976654 L12.8871379,33.060054 C12.3759214,33.9588873 11.2435831,34.2668659 10.3580962,33.747903 C9.4726498,33.2290225 9.16924425,32.079617 9.68046071,31.1807836 L10.7122179,29.3668209 L10.811218,29.1927496 C10.9880559,28.9346879 11.4244345,28.4895098 12.2973133,28.573171 C12.2973133,28.573171 14.3513818,28.7994637 14.5000035,29.8831501 C14.500044,29.8831501 14.5203143,30.2397699 14.2838412,30.5964308 L14.2838412,30.5964308 Z M34.1486343,24.3071076 L29.7811593,24.3071076 C29.4837537,24.2869021 29.3538212,24.1790849 29.3028617,24.116411 L29.2996185,24.110691 L24.6243596,15.8909048 L24.618319,15.8950199 L24.3379,15.4869195 C23.8784133,14.7736387 23.1487237,16.5980128 23.1487237,16.5980128 C22.2775071,18.6308609 23.2723319,20.9421408 23.6192375,21.6406893 L30.1128621,33.0575026 C30.624038,33.9563359 31.7563764,34.2643145 32.6418633,33.7453516 C33.5273097,33.2264711 33.8307152,32.0770656 33.3194988,31.1782322 L31.6956872,28.3233808 C31.6642682,28.2542461 31.609498,28.066389 31.9424981,28.0656483 L34.1486343,28.0656483 C35.1711077,28.0656483 36,27.2242626 36,26.1863779 C36,25.1484933 35.1711077,24.3071076 34.1486343,24.3071076 Z M25.6656033,26.8619227 C25.6656033,26.8619227 25.8987115,28.0656483 24.9966841,28.0656483 L24.0946566,28.0656483 L24.0946566,28.0656483 L8.85136573,28.0656483 C7.82889228,28.0656483 7,27.2242626 7,26.1863779 C7,25.1484933 7.82889228,24.3071076 8.85136573,24.3071076 L13.0021514,24.3071076 C13.6722869,24.2676843 13.8311653,23.8750157 13.8311653,23.8750157 L13.834814,23.8769087 L19.2529787,14.3508883 L19.2513571,14.3505591 C19.3501544,14.1665291 19.2678976,13.9926635 19.2535868,13.9651331 L17.4642481,10.8192164 C16.9529911,9.92038302 17.2563967,8.77101869 18.1418836,8.25209695 C19.0273705,7.73313406 20.1596278,8.04111267 20.6708847,8.93994603 L21.50075,10.3990173 L22.3291558,8.94253858 C22.8403722,8.04370523 23.9726701,7.73572661 24.858157,8.2546895 C25.7436439,8.7736524 26.0470494,9.92301672 25.5357924,10.8218089 L17.9962619,24.0774405 C17.9633024,24.1581388 17.9532078,24.2848034 18.1984782,24.3071076 L22.7051695,24.3071076 L22.7061425,24.3516748 C22.7061425,24.3516748 25.3108734,24.3928264 25.6656033,26.8619227 Z" id="形状" fill="#1890FF"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

+ 272
- 0
src/components/ContentDesign.vue Dosyayı Görüntüle

@@ -0,0 +1,272 @@
<template>
<div class="content-design" :style="'background:url(' + modBackground + ')'">
<!-- type === 1 -->
<div class="content-margin">
<div
v-if="
(mod.desc === '左文右图' || mod.desc === '左图右文') &&
mod.isShow === '1'
"
>
<div
class="content-text"
:style="
'float:' +
getDescStyle('text',mod.desc) +
';text-align:' +
getDescStyle('text',mod.desc)
"
>
<div class="mod-title">{{ mod.mainText }}</div>
<div class="mod-title2">{{ mod.subText }}</div>
<div class="mod-content">{{ mod.content }}</div>
</div>

<div class="content-img" :style="'float:' + getDescStyle('img',mod.desc)">
<img style="width: 100%" :src="mod.mainImage" alt="" />
</div>
</div>

<!-- type === 2 -->
<div
class="modtype2-box"
v-if="mod.desc === '两侧文中间图' && mod.isShow === '1'"
>
<div>
<div class="type-title">{{ mod.leftSetting.mainText }}</div>
<div class="type-subText">{{ mod.leftSetting.subText }}</div>

<div class="type-content">
{{ mod.leftSetting.content }}
</div>
</div>

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

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

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

<div
class="modtype3-box"
v-if="mod.desc === '上图下文样式' && mod.isShow === '1'"
>
<div class="modFor-box" v-for="(item, index) in modList" :key="index">
<img class="item-img" :src="item.img" />
<div class="type3-title">{{ item.mainText }}</div>
<div class="type3-subheading">{{ item.subText }}</div>
<div class="type3-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
computed: {
modBackground: function () {
let background = "";
if (this.mod.desc === "上图下文样式") {
background = this.mod.imgSetting.bgImage;
} else {
background = this.mod.bgImage;
}
return background;
},

modList: function () {
this.mod.leftSetting.img = this.mod.imgSetting.leftImage;
this.mod.centerSetting.img = this.mod.imgSetting.centerImage;
this.mod.rightSetting.img = this.mod.imgSetting.rightImage;

return [
this.mod.leftSetting,
this.mod.centerSetting,
this.mod.rightSetting,
];
},

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";
}
}
};
},
},
props: {
mod: {
type: Object,
},
},
data() {
return {};
},
mounted() {},
};
</script>

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

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

.content-text {
width: 600px;
display: flex;
flex-flow: column;
}

.mod-title {
color: #333333;
font-size: 40px;
font-weight: bold;
line-height: 56px;
}

.mod-title2 {
font-weight: bold;

color: #4a4a4a;
line-height: 36px;
font-size: 24px;
margin-bottom: 20px;
}

.content-text {
color: #999999;
font-size: 16px;
line-height: 36px;
font-weight: bold;
}

.content-img {
width: 260px;
display: flex;
}

.content-text {
padding-top: 78px;
}

.modtype2-box {
width: 100%;
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
color: #333333;
font-weight: bold;
}

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

.type-content {
font-size: 16px;
line-height: 22px;
white-space: pre-line;
}

.modtype3-box {
width: 100%;
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
color: #333333;
font-weight: bold;
align-items: flex-start;
}

.modFor-box {
width: 270px;
height: 100%;
display: flex;
flex-flow: column;
font-weight: bold;
}

.item-img {
width: 270px;
height: 210px;
border-radius: 10px;
margin-bottom: 40px;
color: #333333;
}

.type3-title {
font-size: 40px;
}

.type3-content {
font-size: 16px;
line-height: 30px;
margin-top: 20px;
height: 150px;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
color: #999999;
white-space: pre-line;
}

.type3-subheading {
font-size: 24px;
}

.type-subText {
font-size: 24px;
margin-bottom: 15px;
color: rgb(74, 74, 74);
}
.mod-content {
white-space: pre-line;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;
}
</style>

+ 234
- 0
src/components/Download.vue Dosyayı Görüntüle

@@ -0,0 +1,234 @@
<template>
<div class="download-box">
<div class="title">
<span>下载软件地址</span>
</div>

<div class="download-bg" :style="'background:url(' + mod.bgImage + ')'">
<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.iosLink)"
>
<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",
};
},
},

props: {
mod: {
type: Object,
default: () => {},
},
linkData: {
tpye: Object,
default: () => {},
},
},
data() {
return {};
},
mounted() {
// console.log(this.mod)
},
methods: {
downloadLink: function (link) {
window.open(link);
},
},
};
</script>


<style scoped>
.download-box {
width: 1200px;
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;
}

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

.mainRight-box {
display: flex;
flex-flow: column;
}

.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;
}
</style>

+ 264
- 0
src/components/HomeStyle.vue Dosyayı Görüntüle

@@ -0,0 +1,264 @@
<template>
<div
class="home-style"
:style="'background:url(' + mod.bgImage + ')'"
v-if="mod"
>
<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: () => {},
},
},

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

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

methods: {
downloadLink: function (link) {
window.open(link);
},
},
};
</script>


<style scoped>
.home-style {
width: 100%;
height: 952px;
/* background-image: url("../assets/svg/1.svg"); */
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;
padding-top: 330px;
}

.homeImgStyle {
width: 430px;
height: 100%;
padding-top: 233px;
box-sizing: border-box;
position: relative;
}

.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%;
}
</style>

+ 134
- 0
src/components/NavigationBar.vue Dosyayı Görüntüle

@@ -0,0 +1,134 @@
<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: 40px;
display: flex;
align-items: center;
padding: 18px 0;
position: absolute;
width: 1200px;
margin: 0 auto;
left: 0;
z-index: 99;
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);
}
</style>

+ 0
- 0
Dosyayı Görüntüle


+ 18
- 0
src/main.js Dosyayı Görüntüle

@@ -0,0 +1,18 @@
import { createApp } from 'vue'
import App from './App.vue'

import route from '../src/route/index'

import store from './store' // 引入 vuex


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


const app = createApp(App)

app.use(ElementPlus, { size: 'small', zIndex: 3000 });
app.use(store) // 使用 vuex
app.use(route)
app.mount('#app')

+ 21
- 0
src/route/index.js Dosyayı Görüntüle

@@ -0,0 +1,21 @@
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

const routes = [
{
path: '/',
component: () => import('../views/index.vue'),
meta: {
title: '首页'
}
},

]


const router = createRouter({
history: createWebHashHistory(),
routes,
});


export default router

+ 2
- 0
src/store/actions.js Dosyayı Görüntüle

@@ -0,0 +1,2 @@
let actions = {}
export default actions

+ 3
- 0
src/store/getters.js Dosyayı Görüntüle

@@ -0,0 +1,3 @@
let getters = {}

export default getters

+ 10
- 0
src/store/index.js Dosyayı Görüntüle

@@ -0,0 +1,10 @@
import { createStore } from 'vuex'
import state from './state';
import getters from './getters';
import mutations from './mutations';
import actions from './actions';


export default createStore({
state, getters, mutations, actions
})

+ 2
- 0
src/store/mutations.js Dosyayı Görüntüle

@@ -0,0 +1,2 @@
let mutations = {}
export default mutations

+ 5
- 0
src/store/state.js Dosyayı Görüntüle

@@ -0,0 +1,5 @@
let state = {
}

export default state

+ 55
- 0
src/utlis/utlis.js Dosyayı Görüntüle

@@ -0,0 +1,55 @@
import axios from 'axios'
const service = axios.create({
timeout: 15000 // request timeout
})


// request interceptor
service.interceptors.request.use(
config => {
config.headers.master_id = '123456'
config.headers.platform = 'wap'
return config
},
response => {
console.log(response, 'response')
},
error => {
// Do something with request error
console.log("出错啦",error) // for debug
}
)

// response interceptor
service.interceptors.response.use(response => {
return response.data
},
error => {
return Promise.reject( error.response )
}
)



export default function request(param) {
return new Promise((resolve, reject) => {
service({
url: param.url,
method: param.method || 'GET',
data: param.data
}).then((result) => {
resolve(result)
}).catch((err) => {
reject(err)
});
})
}



+ 107
- 0
src/views/index.vue Dosyayı Görüntüle

@@ -0,0 +1,107 @@
<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 = "智莺生活";
var link =
document.querySelector("link[rel*='icon']") ||
document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "http://h5.99813608.zhiyingos.com/static/favicon.png";
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>

+ 14
- 0
vite.config.js Dosyayı Görüntüle

@@ -0,0 +1,14 @@
const path = require('path')

module.exports = {
hostname: '0.0.0.0',
port: 8080,
// 反向代理
proxy: {
'/api': {
target: 'https://inapi.izhyin.cn/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}

Yaz Önizleme
Yükleniyor…
İptal
Kaydet