| @@ -0,0 +1,3 @@ | |||||
| > 1% | |||||
| last 2 versions | |||||
| not dead | |||||
| @@ -0,0 +1,23 @@ | |||||
| .DS_Store | |||||
| node_modules | |||||
| /dist | |||||
| # local env files | |||||
| .env.local | |||||
| .env.*.local | |||||
| # Log files | |||||
| npm-debug.log* | |||||
| yarn-debug.log* | |||||
| yarn-error.log* | |||||
| pnpm-debug.log* | |||||
| # Editor directories and files | |||||
| .idea | |||||
| .vscode | |||||
| *.suo | |||||
| *.ntvs* | |||||
| *.njsproj | |||||
| *.sln | |||||
| *.sw? | |||||
| @@ -0,0 +1,10 @@ | |||||
| module.exports = { | |||||
| "plugins": { | |||||
| "autoprefixer": {}, | |||||
| "postcss-px2rem": { | |||||
| "remUnit": 37.5 | |||||
| } | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,19 @@ | |||||
| # home | |||||
| ## Project setup | |||||
| ``` | |||||
| npm install | |||||
| ``` | |||||
| ### Compiles and hot-reloads for development | |||||
| ``` | |||||
| npm run serve | |||||
| ``` | |||||
| ### Compiles and minifies for production | |||||
| ``` | |||||
| npm run build | |||||
| ``` | |||||
| ### Customize configuration | |||||
| See [Configuration Reference](https://cli.vuejs.org/config/). | |||||
| @@ -0,0 +1,29 @@ | |||||
| { | |||||
| "name": "Metavatar", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "dev": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build" | |||||
| }, | |||||
| "dependencies": { | |||||
| "axios": "^0.27.2", | |||||
| "lib-flexible": "^0.3.2", | |||||
| "postcss-px2rem": "^0.3.0", | |||||
| "register-service-worker": "^1.7.1", | |||||
| "swiper": "^4.5.1", | |||||
| "vant": "^2.12.48", | |||||
| "vue": "^2.6.11", | |||||
| "vue-router": "^3.2.0", | |||||
| "vuex": "^3.4.0" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-pwa": "~4.5.13", | |||||
| "@vue/cli-plugin-router": "~4.5.13", | |||||
| "@vue/cli-plugin-vuex": "~4.5.13", | |||||
| "@vue/cli-service": "~4.5.13", | |||||
| "node-sass": "^4.12.0", | |||||
| "sass-loader": "^8.0.2", | |||||
| "vue-template-compiler": "^2.6.11" | |||||
| } | |||||
| } | |||||
| @@ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/> | |||||
| </svg> | |||||
| @@ -0,0 +1,18 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang=""> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> | |||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||||
| </head> | |||||
| <body> | |||||
| <noscript> | |||||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
| </noscript> | |||||
| <div id="app"></div> | |||||
| <!-- built files will be auto injected --> | |||||
| </body> | |||||
| </html> | |||||
| @@ -0,0 +1,2 @@ | |||||
| User-agent: * | |||||
| Disallow: | |||||
| @@ -0,0 +1,38 @@ | |||||
| <template> | |||||
| <div id="app"> | |||||
| <top/> | |||||
| <transition name="app" mode="out-in"> | |||||
| <router-view></router-view> | |||||
| </transition> | |||||
| <tail/> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import top from "./components/common/top" | |||||
| import tail from "./components/common/tail" | |||||
| export default { | |||||
| components:{ | |||||
| top, | |||||
| tail | |||||
| }, | |||||
| data(){ | |||||
| return{} | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| body,p{ | |||||
| margin: 0 0; | |||||
| padding: 0 0; | |||||
| } | |||||
| input{ | |||||
| background:none; | |||||
| outline:none; | |||||
| border:none; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,131 @@ | |||||
| <template> | |||||
| <div class="Box"> | |||||
| <div class="title">遂芒科技</div> | |||||
| <div class="cont"> | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元, | |||||
| 同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国 | |||||
| 企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| </div> | |||||
| <img src="../../assets/img/my_1.png" alt class="myimg"> | |||||
| <div class="teamBox"> | |||||
| <img src="../../assets//img//myS.png" alt class="teamImg"> | |||||
| <div class="introduceBox"> | |||||
| <div class="title">团队介绍</div> | |||||
| <p> | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%; | |||||
| 完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4 | |||||
| 49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行 | |||||
| 业唯一新签合同额 | |||||
| 营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位, | |||||
| 中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续 | |||||
| 保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位 | |||||
| 进一步巩固。 | |||||
| </p> | |||||
| </div> | |||||
| </div> | |||||
| <div class="title1">公司愿景</div> | |||||
| <p class="vision"> | |||||
| 2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每 | |||||
| 股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250 | |||||
| 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。 | |||||
| </p> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from "vuex"; | |||||
| export default { | |||||
| data(){ | |||||
| return{ | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| margin-top: 70px; | |||||
| background-color: #202020; | |||||
| overflow: hidden; | |||||
| .title { | |||||
| font-size: 48px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| margin: 120px 0 62px 320px; | |||||
| } | |||||
| .title1 { | |||||
| font-size: 48px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| margin: 180px 0 62px 320px; | |||||
| } | |||||
| .cont { | |||||
| font-size: 16px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #696969; | |||||
| line-height: 30px; | |||||
| margin-left: 320px; | |||||
| margin-right: 330px; | |||||
| } | |||||
| .myimg { | |||||
| width: 1280px; | |||||
| height: 376px; | |||||
| margin: 100px auto 170px auto; | |||||
| display: block; | |||||
| } | |||||
| .teamBox { | |||||
| width: 1280px; | |||||
| margin: auto; | |||||
| overflow: hidden; | |||||
| .teamImg { | |||||
| width: 695px; | |||||
| height: 568px; | |||||
| float: left; | |||||
| } | |||||
| .introduceBox { | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| .title { | |||||
| margin-left: 70px; | |||||
| margin-top: 40px; | |||||
| font-size: 48px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| } | |||||
| p { | |||||
| width: 512px; | |||||
| margin-left: 70px; | |||||
| margin-top: 55px; | |||||
| font-size: 14px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #696969; | |||||
| line-height: 36px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .vision { | |||||
| width: 1300px; | |||||
| font-size: 14px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #696969; | |||||
| line-height: 36px; | |||||
| margin: auto auto 250px auto; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,284 @@ | |||||
| <template> | |||||
| <div class="tailBox"> | |||||
| <div class="title">联系我们</div> | |||||
| <!-- <div class="taillong"> | |||||
| <img src="../../assets/img/LOGO1.png" alt> | |||||
| </div> --> | |||||
| <div class="tiemBox"> | |||||
| <div class="contentBox"> | |||||
| <!-- <div class="taolIconText">{{characters ==1?'联系我们':'Contact us'}}</div> --> | |||||
| <div class="contentInput"> | |||||
| <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> | |||||
| </div> | |||||
| <div class="contentInput"> | |||||
| <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> | |||||
| </div> | |||||
| <div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="tailText"> <img src="../../assets/img/logoh.png" alt=""></div> | |||||
| <div class="tailText">TEL:86 152 1093 7300</div> | |||||
| <div class="tailText">{{characters ==1?'北京市海淀区中关村南大街12号农业科学院信息楼311室':'311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'}}</div> | |||||
| <div class="tailText">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userName: "", | |||||
| phone: "", | |||||
| email: "" | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| submit() { | |||||
| let phone = /^1[35789]\d{9}$/; | |||||
| if (this.userName == "") { | |||||
| Toast.fail ( | |||||
| this.characters == 1 ? "请输入姓名" : "Please enter your name" | |||||
| ); | |||||
| return; | |||||
| } else if (!phone.test(this.phone)) { | |||||
| Toast.fail ( | |||||
| this.characters == 1 | |||||
| ? "请输入手机号" | |||||
| : "Please enter your mobile phone number" | |||||
| ); | |||||
| return; | |||||
| } else if (this.email == "") { | |||||
| Toast.fail ( | |||||
| this.characters == 1 ? "请输入邮箱" : "Please enter email address" | |||||
| ); | |||||
| return; | |||||
| } | |||||
| let params = { | |||||
| mallName: this.email, //邮箱 | |||||
| applicant: this.userName, //姓名 | |||||
| phone: this.phone //电话 | |||||
| }; | |||||
| this.$axios({ | |||||
| method: "post", | |||||
| url: "/api/callback/wxMallApply/add", | |||||
| headers: { | |||||
| "Content-Type": "application/json;charset=UTF-8" | |||||
| }, | |||||
| data: params | |||||
| }) | |||||
| .then(res => { | |||||
| this.email = ""; | |||||
| this.userName = ""; | |||||
| this.phone = ""; | |||||
| Toast.success( | |||||
| this.characters == 1 ? "提交成功" : "submit successfully" | |||||
| ); | |||||
| }) | |||||
| .catch(err => { | |||||
| Toast.fail (err.message); | |||||
| }); | |||||
| } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .tailBox { | |||||
| overflow: hidden; | |||||
| .title{ | |||||
| text-align: center; | |||||
| font-size: 18px; | |||||
| line-height: 30px; | |||||
| color: #323232; | |||||
| margin-top: 20px; | |||||
| } | |||||
| overflow: hidden; | |||||
| // height: 578px; | |||||
| background: #f1f4f7; | |||||
| .taillong { | |||||
| width: 168px; | |||||
| height: 50px; | |||||
| // margin-top: 60px; | |||||
| // margin-left: 360px; | |||||
| img { | |||||
| width: 168px; | |||||
| height: 50px; | |||||
| } | |||||
| } | |||||
| .tiemBox{ | |||||
| overflow: hidden; | |||||
| margin-top: 20px; | |||||
| } | |||||
| .taolIconBox { | |||||
| margin-left: 380px; | |||||
| float: left; | |||||
| } | |||||
| .taolIconText { | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #323232; | |||||
| line-height: 62px; | |||||
| } | |||||
| .iconBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| width: 124px; | |||||
| img { | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| } | |||||
| } | |||||
| .contentBox { | |||||
| margin: 10px auto; | |||||
| .contentInput { | |||||
| width: 220px; | |||||
| height: 36px; | |||||
| background: #ffffff; | |||||
| text-align: center; | |||||
| margin: 0 auto 10px auto; | |||||
| input { | |||||
| width: 200px; | |||||
| height: 36px; | |||||
| } | |||||
| input::placeholder { | |||||
| font-weight: 400; | |||||
| color: #949494; | |||||
| } | |||||
| } | |||||
| .subBtn { | |||||
| width: 70px; | |||||
| height: 24px; | |||||
| background: #ffffff; | |||||
| border-radius: 24px; | |||||
| text-align: center; | |||||
| line-height: 24px; | |||||
| cursor: pointer; | |||||
| font-size: 14px; | |||||
| margin: 20px auto 10px auto; | |||||
| } | |||||
| } | |||||
| .rqCodeBox { | |||||
| width: 360px; | |||||
| // position: absolute; | |||||
| // top: 130px; | |||||
| float: left; | |||||
| margin-left: 260px; | |||||
| .phone { | |||||
| font-size: 14px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| } | |||||
| .site { | |||||
| font-size: 14px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| margin-top: 10px; | |||||
| } | |||||
| .rqCodeTiemBox { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| margin-top: 30px; | |||||
| .rqCodeTiem { | |||||
| overflow: hidden; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| .rqCodeTiem1 { | |||||
| margin-left: 30px; | |||||
| .rqcode { | |||||
| width: 150px; | |||||
| height: 150px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| .rqtext { | |||||
| text-align: center; | |||||
| font-size: 12px; | |||||
| font-family: Inter; | |||||
| font-weight: 400; | |||||
| color: #172c34; | |||||
| line-height: 62px; | |||||
| height: 62px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .showBoxP { | |||||
| font-size: 16px !important; | |||||
| text-align: center !important; | |||||
| line-height: 20px !important; | |||||
| color: #696969 !important; | |||||
| } | |||||
| .tailText { | |||||
| height: 20px; | |||||
| line-height: 20px; | |||||
| // margin-top: 10px; | |||||
| text-align: center; | |||||
| font-size: 10px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #191919; | |||||
| margin-bottom: 4px; | |||||
| img{ | |||||
| width: 110px; | |||||
| height: 30px; | |||||
| } | |||||
| } | |||||
| } | |||||
| ::-webkit-input-placeholder { | |||||
| /* WebKit browsers,webkit内核浏览器 */ | |||||
| color: #ccc; | |||||
| font-size: 12px; | |||||
| } | |||||
| :-moz-placeholder { | |||||
| /* Mozilla Firefox 4 to 18 */ | |||||
| color: #ccc; | |||||
| font-size: 12px; | |||||
| } | |||||
| ::-moz-placeholder { | |||||
| /* Mozilla Firefox 19+ */ | |||||
| color: #ccc; | |||||
| font-size: 12px; | |||||
| } | |||||
| :-ms-input-placeholder { | |||||
| /* Internet Explorer 10+ */ | |||||
| color: #ccc; | |||||
| font-size: 12px; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,221 @@ | |||||
| <template> | |||||
| <div class="topBox"> | |||||
| <div class="logoBox" @click="go('/')"> | |||||
| <img src="../../assets/img/LOGO1.png" alt class="logo"> | |||||
| <!-- <div class="logoTitle">metavatar</div> --> | |||||
| </div> | |||||
| <!-- <div class="categoryBox"> | |||||
| <div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div> | |||||
| <div class="categoryitem">{{characters==1?'创新技术':'technology'}}</div> | |||||
| <div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div> | |||||
| <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> | |||||
| <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> | |||||
| </div>--> | |||||
| <div class="cutBox"> | |||||
| <div class="en"> | |||||
| <div class="more" @click="showPopup"> | |||||
| <div class="wire"></div> | |||||
| <div class="wire"></div> | |||||
| <div class="wire"></div> | |||||
| </div> | |||||
| <!-- <el-select v-model="charactersMy" placeholder="请选择" @change="change"> | |||||
| <el-option | |||||
| v-for="item in languageLsit" | |||||
| :key="item.value" | |||||
| :label="item.name" | |||||
| :value="item.value" | |||||
| > | |||||
| <div class> | |||||
| <img | |||||
| :src="item.url" | |||||
| alt | |||||
| class="cutImg" | |||||
| > | |||||
| <span>{{item.name}}</span> | |||||
| </div> | |||||
| </el-option> | |||||
| </el-select>--> | |||||
| </div> | |||||
| </div> | |||||
| <van-popup | |||||
| v-model="show" | |||||
| position="top" | |||||
| :style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}" | |||||
| > | |||||
| <div class="goItem">{{characters==1?'产品能力':'Product'}}</div> | |||||
| <div class="goItem">{{characters==1?'创新技术':'Technology'}}</div> | |||||
| <div class="goItem">{{characters==1?'解决方案':'Solutions'}}</div> | |||||
| <!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> --> | |||||
| <div class="goItem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> | |||||
| <div class="languageImgBox" @click="change(1)"> | |||||
| <img src="../../assets/img/cn.jpeg" alt class="cutImg"> | |||||
| </div> | |||||
| <div class="languageImgBox" @click="change(2)"> | |||||
| <img src="../../assets/img/en.jpg" alt class="cutImg"> | |||||
| </div> | |||||
| </van-popup> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Vue from "vue"; | |||||
| import { Popup } from "vant"; | |||||
| Vue.use(Popup); | |||||
| import { mapState, mapActions } from "vuex"; | |||||
| export default { | |||||
| name: "top", | |||||
| data() { | |||||
| return { | |||||
| show: false, | |||||
| languageLsit: [ | |||||
| { | |||||
| name: "Cn", | |||||
| value: 1, | |||||
| url: require("../../assets/img/cn.jpeg") | |||||
| }, | |||||
| { | |||||
| name: "En", | |||||
| value: 2, | |||||
| url: require("../../assets/img/en.jpg") | |||||
| } | |||||
| ], | |||||
| charactersMy: 1 | |||||
| }; | |||||
| }, | |||||
| watch: { | |||||
| // languageLsit(newVal) { | |||||
| // this.setCharacters([ | |||||
| // { | |||||
| // name: "Cn", | |||||
| // value: 1 | |||||
| // }, | |||||
| // { | |||||
| // name: "En", | |||||
| // value: 2 | |||||
| // } | |||||
| // ]); | |||||
| // } | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| }, | |||||
| methods: { | |||||
| ...mapActions(["setCharacters"]), | |||||
| showPopup() { | |||||
| this.show = true; | |||||
| }, | |||||
| change(value) { | |||||
| this.setCharacters(value); | |||||
| this.show = false; | |||||
| }, | |||||
| go(url) { | |||||
| this.$router.push(url); | |||||
| } | |||||
| }, | |||||
| mounted() { | |||||
| console.log(this.languageLsit, "characters"); | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .goItem { | |||||
| margin: 20px; | |||||
| color: #fff; | |||||
| font-size: 14px; | |||||
| } | |||||
| .languageImgBox { | |||||
| margin: 10px 0 0 20px; | |||||
| overflow: hidden; | |||||
| img { | |||||
| width: 25px; | |||||
| height: 25px; | |||||
| border-radius: 50px; | |||||
| border: 1px #fff solid; | |||||
| } | |||||
| } | |||||
| .topBox { | |||||
| width: 100%; | |||||
| height: 30px; | |||||
| overflow: hidden; | |||||
| position: fixed; | |||||
| top: 0; | |||||
| left: 0; | |||||
| z-index: 100; | |||||
| } | |||||
| .logoBox { | |||||
| // margin-top: 10px; | |||||
| margin-left: 10px; | |||||
| margin-bottom: 10px; | |||||
| float: left; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .logo { | |||||
| float: left; | |||||
| width: 120px; | |||||
| height: 32px; | |||||
| } | |||||
| .logoTitle { | |||||
| float: left; | |||||
| line-height: 15px; | |||||
| margin-left: 5px; | |||||
| font-size: 14px; | |||||
| } | |||||
| .categoryBox { | |||||
| height: 15px; | |||||
| width: 40%; | |||||
| float: left; | |||||
| margin-top: 10px; | |||||
| margin-left: 10px; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .categoryitem { | |||||
| // line-height: 13px; | |||||
| color: #7d7d7d; | |||||
| font-size: 13px; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutBox { | |||||
| float: right; | |||||
| margin-top: 6px; | |||||
| margin-right: 25px; | |||||
| overflow: hidden; | |||||
| cursor: pointer; | |||||
| } | |||||
| .cutImg { | |||||
| width: 30px; | |||||
| height: 20px; | |||||
| float: left; | |||||
| margin-top: 6px; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .en { | |||||
| float: left; | |||||
| font-size: 15px; | |||||
| } | |||||
| .more { | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| // background-color: aquamarine; | |||||
| overflow: hidden; | |||||
| } | |||||
| .wire { | |||||
| width: 20px; | |||||
| height: 1px; | |||||
| background-color: #fff; | |||||
| margin-top: 5px; | |||||
| } | |||||
| .el-select { | |||||
| width: 120px; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,141 @@ | |||||
| <template> | |||||
| <div class="Box"> | |||||
| <div class="topBox"> | |||||
| <div class="title1">生动有趣</div> | |||||
| <div class="title2">主流艺术风格让您的照片多姿多彩</div> | |||||
| <div class="title3">让您在社交媒体上展示个性自我</div> | |||||
| <div class="btn">立刻体验</div> | |||||
| </div> | |||||
| <div class="vdBox"></div> | |||||
| <div class="caseBox"> | |||||
| <div class="title">邃芒ai数字人10大个性化特点</div> | |||||
| <div class="caseLsit"> | |||||
| <div class="itemBox" v-for="(item,index) in 10" :key="index"> | |||||
| <img src="../../assets/img/styleAdd1.png" alt> | |||||
| <div class="itemCont">文案</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import { mapState } from "vuex"; | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| computed: { | |||||
| ...mapState({ | |||||
| characters: state => state.publicObj.characters | |||||
| }) | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .Box { | |||||
| margin-top: 70px; | |||||
| // background-color: #202020; | |||||
| overflow: hidden; | |||||
| .topBox { | |||||
| height: 1080px; | |||||
| background: #202020; | |||||
| background-image: url("../../assets/img/styleAdd_bg.png"); | |||||
| background-repeat: no-repeat; | |||||
| // background-size: 100% 100%; | |||||
| background-position-x: 854px; | |||||
| background-position-y: 300px; | |||||
| overflow: hidden; | |||||
| .title1 { | |||||
| margin-left: 192px; | |||||
| margin-top: 371px; | |||||
| font-size: 48px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| } | |||||
| .title2 { | |||||
| margin-left: 192px; | |||||
| font-size: 48px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| } | |||||
| .title3 { | |||||
| margin-left: 192px; | |||||
| font-size: 16px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #fefefe; | |||||
| line-height: 62px; | |||||
| } | |||||
| .btn { | |||||
| margin-top: 60px; | |||||
| margin-left: 192px; | |||||
| width: 220px; | |||||
| height: 60px; | |||||
| border: 2px solid #ffffff; | |||||
| border-radius: 30px; | |||||
| font-size: 18px; | |||||
| font-family: Source Han Sans CN; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 62px; | |||||
| text-align: center; | |||||
| cursor: pointer; | |||||
| } | |||||
| } | |||||
| .vdBox { | |||||
| height: 1080px; | |||||
| background-image: url("../../assets/img/vd.png"); | |||||
| background-repeat: no-repeat; | |||||
| background-size: 100% 100%; | |||||
| } | |||||
| .caseBox { | |||||
| height: 1080px; | |||||
| background: #fff; | |||||
| overflow: hidden; | |||||
| .title { | |||||
| text-align: center; | |||||
| font-size: 24px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #232324; | |||||
| line-height: 62px; | |||||
| margin: 120px 0; | |||||
| } | |||||
| .caseLsit { | |||||
| width: 1280px; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| flex-wrap: wrap; | |||||
| margin: 0 auto; | |||||
| .itemBox { | |||||
| width: 240px; | |||||
| height: 240px; | |||||
| position: relative; | |||||
| margin-bottom: 20px; | |||||
| img { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .itemCont { | |||||
| width: 100%; | |||||
| font-size: 14px; | |||||
| font-family: Microsoft YaHei; | |||||
| font-weight: 400; | |||||
| color: #ffffff; | |||||
| line-height: 24px; | |||||
| text-align: center; | |||||
| position: absolute; | |||||
| left: 0; | |||||
| bottom: 26px; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,22 @@ | |||||
| import Vue from 'vue' | |||||
| import App from './App.vue' | |||||
| import './registerServiceWorker' | |||||
| import router from './router' | |||||
| import store from './store' | |||||
| import 'vant/lib/index.css' | |||||
| // 引入lib-flexible做rem适配 | |||||
| import 'lib-flexible' | |||||
| import axios from "axios" | |||||
| // Vue.use(ElementUI); | |||||
| Vue.config.productionTip = false | |||||
| Vue.prototype.$axios = axios | |||||
| new Vue({ | |||||
| router, | |||||
| store, | |||||
| render: function (h) { return h(App) } | |||||
| }).$mount('#app') | |||||
| @@ -0,0 +1,32 @@ | |||||
| /* eslint-disable no-console */ | |||||
| import { register } from 'register-service-worker' | |||||
| if (process.env.NODE_ENV === 'production') { | |||||
| register(`${process.env.BASE_URL}service-worker.js`, { | |||||
| ready () { | |||||
| console.log( | |||||
| 'App is being served from cache by a service worker.\n' + | |||||
| 'For more details, visit https://goo.gl/AFskqB' | |||||
| ) | |||||
| }, | |||||
| registered () { | |||||
| console.log('Service worker has been registered.') | |||||
| }, | |||||
| cached () { | |||||
| console.log('Content has been cached for offline use.') | |||||
| }, | |||||
| updatefound () { | |||||
| console.log('New content is downloading.') | |||||
| }, | |||||
| updated () { | |||||
| console.log('New content is available; please refresh.') | |||||
| }, | |||||
| offline () { | |||||
| console.log('No internet connection found. App is running in offline mode.') | |||||
| }, | |||||
| error (error) { | |||||
| console.error('Error during service worker registration:', error) | |||||
| } | |||||
| }) | |||||
| } | |||||
| @@ -0,0 +1,39 @@ | |||||
| import Vue from 'vue' | |||||
| import VueRouter from 'vue-router' | |||||
| Vue.use(VueRouter) | |||||
| // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 | |||||
| const originalPush = VueRouter.prototype.push | |||||
| VueRouter.prototype.push = function push(location) { | |||||
| return originalPush.call(this, location).catch(err => err) | |||||
| } | |||||
| const routes = [ | |||||
| { | |||||
| path: '/', | |||||
| name: 'Home', | |||||
| // component: Home | |||||
| component: ()=> import("../components/home/home"), | |||||
| }, | |||||
| { | |||||
| path: '/aboutUe', | |||||
| name: 'aboutUe', | |||||
| // component: Home | |||||
| component: ()=> import("../components/aboutUe/aboutUe"), | |||||
| }, | |||||
| { | |||||
| path: '/styleAdd', | |||||
| name: 'styleAdd', | |||||
| // component: Home | |||||
| component: ()=> import("../components/styleAdd/styleAdd"), | |||||
| }, | |||||
| ] | |||||
| const router = new VueRouter({ | |||||
| mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes | |||||
| }) | |||||
| export default router | |||||
| @@ -0,0 +1,17 @@ | |||||
| import Vue from 'vue' | |||||
| import Vuex from 'vuex' | |||||
| import publicObj from './modules/public.js' | |||||
| Vue.use(Vuex) | |||||
| export default new Vuex.Store({ | |||||
| state: { | |||||
| }, | |||||
| mutations: { | |||||
| }, | |||||
| actions: { | |||||
| }, | |||||
| modules: { | |||||
| publicObj | |||||
| } | |||||
| }) | |||||
| @@ -0,0 +1,16 @@ | |||||
| let publicObj = { | |||||
| state:{ | |||||
| characters:1,//1=》中文 2=》英文 | |||||
| }, | |||||
| mutations:{ | |||||
| setCharacters(state,data){ | |||||
| state.characters = data | |||||
| } | |||||
| }, | |||||
| actions:{ | |||||
| setCharacters(context,data){ | |||||
| context.commit("setCharacters" ,data) | |||||
| } | |||||
| } | |||||
| } | |||||
| export default publicObj | |||||
| @@ -0,0 +1,47 @@ | |||||
| module.exports = { | |||||
| css: { | |||||
| loaderOptions: { | |||||
| css: { | |||||
| // options here will be passed to css-loader | |||||
| }, | |||||
| // postcss: { | |||||
| // // options here will be passed to postcss-loader | |||||
| // plugins: [require('postcss-px2rem')({ | |||||
| // remUnit: 75 | |||||
| // })] | |||||
| // } | |||||
| } | |||||
| }, | |||||
| pwa: { | |||||
| iconPaths: { | |||||
| favicon32: 'favicon.ico', | |||||
| favicon16: 'favicon.ico', | |||||
| appleTouchIcon: 'favicon.ico', | |||||
| maskIcon: 'favicon.ico', | |||||
| msTileImage: 'favicon.ico' | |||||
| } | |||||
| }, | |||||
| //http://www.metavatar.cc/ | |||||
| devServer: { | |||||
| overlay: { | |||||
| warnings: false, | |||||
| errors: false | |||||
| }, | |||||
| proxy: { | |||||
| '/api': { | |||||
| target: 'http://www.metavatar.cc/api', | |||||
| changeOrigin: true, | |||||
| pathRewrite: { | |||||
| '^/api': '' | |||||
| }, | |||||
| }, | |||||
| } | |||||
| }, | |||||
| lintOnSave: false, | |||||
| publicPath: './', // 打包后引用的资源路径 | |||||
| } | |||||