glhcp/pc/pages/about_us/index.vue

141 lines
3.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="news-details-container mt16">
<div class="nav-container flex">
<div class="nr" style="width: 70px">当前位置</div>
<el-breadcrumb style="flex: 1;" separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item class="line1">关于我们</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="content-box">
<div class="news-detail-box">
<div class="content-header bg-white">
<div class="news-detail-title">
关于我们
</div>
</div>
<div class="content-html-box bg-white">
<div v-html="detailsObj.content"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
head() {
return {
title: this.$store.getters.headTitle,
link: [{
rel: "icon",
type: "image/x-icon",
href: this.$store.getters.favicon
}],
};
},
async asyncData({
$get,
$post,
query
}) {
let detailsObj = {};
let res = await $get("policy/aboutUs", {});
if (res.code == 1) {
detailsObj = res.data;
}
return {
detailsObj,
};
},
data() {
return {
}
},
mounted() {
console.log('route', this.$route)
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.news-details-container {
.nav-container {
padding: 15px 16px;
}
.content-box {
display: flex;
flex-direction: row;
.news-detail-box {
background-color: #FFFFFF;
width: 100%;
.content-header {
margin: 0px 20px;
padding: 20px 0px;
border-bottom: 1px solid #e5e5e5;
.news-detail-title {
color: #222;
font-size: 24px;
font-weight: 500;
}
}
.content-html-box {
padding: 24px 20px;
&>div {
width: 100%;
overflow: hidden;
::v-deep img {
width: 100%;
}
}
}
}
.recommend-box {
width: 264px;
.recommend-box-header {
padding: 15px 10px;
border-bottom: 1px solid #e5e5e5;
.primary-line {
margin-right: 10px;
background-color: $--color-primary;
width: 4px;
height: 20px;
}
}
.recommend-box-content {
.recommend-list-container {
.recommend-list-item {
padding: 10px;
cursor: pointer;
.goods-info {
margin-top: 8px;
}
}
}
}
}
}
}
</style>