@@ -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: './', // 打包后引用的资源路径 | |||||
} |