2 changed files with 79 additions and 168 deletions
@ -1,97 +0,0 @@ |
|||||
<template> |
|
||||
<view class="main"> |
|
||||
<!-- nav --> |
|
||||
<navigation>{{ i18n.AboutUs }}</navigation> |
|
||||
<view class="body"> |
|
||||
|
|
||||
|
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import api from '@/utils/api' |
|
||||
export default { |
|
||||
name: "AboutUs", |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
}; |
|
||||
}, |
|
||||
computed: { |
|
||||
i18n() { |
|
||||
return this.$t("me"); |
|
||||
}, |
|
||||
}, |
|
||||
onLoad() { |
|
||||
this.about(); |
|
||||
}, |
|
||||
onShow() { }, |
|
||||
methods: { |
|
||||
// 关于我们 |
|
||||
about() { |
|
||||
api.aboutus().then(res => { |
|
||||
console.log(res) |
|
||||
}) |
|
||||
}, |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.main { |
|
||||
|
|
||||
.body { |
|
||||
overflow: hidden; |
|
||||
margin-top: 200rpx; |
|
||||
padding: 0 48rpx; |
|
||||
|
|
||||
.shareText { |
|
||||
margin-top: 104rpx; |
|
||||
font-size: 60rpx; |
|
||||
font-weight: 800; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.scanText { |
|
||||
font-size: 32rpx; |
|
||||
text-align: center; |
|
||||
color: #A2A0A8; |
|
||||
} |
|
||||
|
|
||||
.QRCode { |
|
||||
box-sizing: border-box; |
|
||||
margin: 66rpx auto; |
|
||||
width: 520rpx; |
|
||||
height: 520rpx; |
|
||||
background-image: url(../../static/me/bg_QR_code.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 520rpx; |
|
||||
padding: 52rpx; |
|
||||
|
|
||||
.QRCodeImg { |
|
||||
margin-left: 8rpx; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.myIdText { |
|
||||
font-size: 48rpx; |
|
||||
font-weight: 800; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.button { |
|
||||
height: 112rpx; |
|
||||
margin: 72rpx 0; |
|
||||
border-radius: 32rpx; |
|
||||
color: #15141F !important; |
|
||||
font-weight: 700; |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,86 +1,94 @@ |
|||||
<template> |
<template> |
||||
<view class="main"> |
<view class="main"> |
||||
<!-- nav --> |
<!-- nav --> |
||||
<navigation :bgTransparent="true">{{ i18n.AboutUs }}</navigation> |
<navigation :bgTransparent="true">{{ i18n.AboutUs }}</navigation> |
||||
<!-- 列表 --> |
<!-- 列表 --> |
||||
<view class="content"> |
<view class="content"> |
||||
<view class="card" v-for="(item, index) in 5" :key="index"> |
<view class="card" v-for="(item, index) in aboutus" :key="index"> |
||||
<view class="title">{{ i18n.Consulting }}</view> |
<view class="title">{{ i18n.Consulting }}</view> |
||||
<view class="text">A Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem |
<view class="text">A Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem |
||||
Ipsum has been the industry's standard dummy text ever since the 1500s, </view> |
Ipsum has been the industry's standard dummy text ever since the 1500s, </view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
import api from '@/utils/api' |
||||
name: "aboutUs", |
export default { |
||||
data() { |
name: "aboutUs", |
||||
return { |
data() { |
||||
}; |
return { |
||||
}, |
aboutus:[], |
||||
computed: { |
}; |
||||
i18n() { |
}, |
||||
return this.$t("me"); |
computed: { |
||||
}, |
i18n() { |
||||
}, |
return this.$t("me"); |
||||
onLoad() { |
}, |
||||
}, |
}, |
||||
onShow() { }, |
onLoad() { |
||||
methods: { |
this.about() |
||||
|
}, |
||||
|
|
||||
}, |
onShow() {}, |
||||
} |
methods: { |
||||
|
about() { |
||||
|
api.aboutus().then(res => { |
||||
|
this.aboutus = res |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.main { |
.main { |
||||
background-image: url(../../static/me/image.png); |
background-image: url(../../static/me/image.png); |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 750rpx 424rpx; |
background-size: 750rpx 424rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
&::after { |
&::after { |
||||
content: ""; |
content: ""; |
||||
position:fixed; |
position: fixed; |
||||
bottom: 0px; |
bottom: 0px; |
||||
right: 0px; |
right: 0px; |
||||
width: 418rpx; |
width: 418rpx; |
||||
height: 260rpx; |
height: 260rpx; |
||||
background-image: url(../../static/me/tarBg.png); |
background-image: url(../../static/me/tarBg.png); |
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: cover; |
background-size: cover; |
||||
} |
} |
||||
|
|
||||
.content { |
.content { |
||||
margin-top: 200rpx; |
margin-top: 200rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.card { |
.card { |
||||
margin: 32rpx 32rpx 0; |
margin: 32rpx 32rpx 0; |
||||
border-radius: 40rpx; |
border-radius: 40rpx; |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
padding-bottom: 40rpx; |
padding-bottom: 40rpx; |
||||
background-color: rgba(0, 221, 156, 0.03); |
background-color: rgba(0, 221, 156, 0.03); |
||||
|
|
||||
.title { |
.title { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
line-height: 64rpx; |
line-height: 64rpx; |
||||
background: linear-gradient(65.75deg, #6BB7A8 13.22%, #631FFD 65.49%, #FF844B 114.4%), #FFFFFF; |
background: linear-gradient(65.75deg, #6BB7A8 13.22%, #631FFD 65.49%, #FF844B 114.4%), #FFFFFF; |
||||
-webkit-background-clip: text; |
-webkit-background-clip: text; |
||||
-webkit-text-fill-color: transparent; |
-webkit-text-fill-color: transparent; |
||||
background-clip: text; |
background-clip: text; |
||||
text-fill-color: transparent; |
text-fill-color: transparent; |
||||
} |
} |
||||
|
|
||||
.text { |
.text { |
||||
line-height: 150%; |
line-height: 150%; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #80AB9E; |
color: #80AB9E; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue