123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
<template>
|
|
<div class="about" v-loading="loading">
|
|
<div
|
|
v-if="!state.banner"
|
|
style="height: 394px; background-color: #ccc"
|
|
></div>
|
|
<div
|
|
v-else
|
|
style="height: 394px; background-size: cover; background-color: #ccc"
|
|
:style="{ backgroundImage: `url(${state.banner})` }"
|
|
></div>
|
|
|
|
<div class="box conter1000">
|
|
<div class="_l">
|
|
<div
|
|
class="_item pointer"
|
|
v-for="(item, index) in state.data"
|
|
:class="index == kindId ? 'x_fff x_bg_blue' : ''"
|
|
:key="item.id"
|
|
@click="handleActive(index)"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
<div class="_r">
|
|
<div
|
|
v-if="state.data.length"
|
|
class="html"
|
|
v-html="state.data[kindId]['content']"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<webFooter></webFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="AboutUs">
|
|
import webFooter from "@/components/webFooter/index.vue";
|
|
import request from "@/utils/request";
|
|
import { banner } from "@/api/website/home/index";
|
|
import { getAboutList } from "../../../api/website/aboutUs";
|
|
function about() {
|
|
return request({
|
|
url: "/v1/sys/about",
|
|
method: "get",
|
|
});
|
|
}
|
|
const loading = ref(true);
|
|
const state = reactive({
|
|
data: [],
|
|
banner: "",
|
|
});
|
|
const kindId = ref(0);
|
|
|
|
/** 查询 */
|
|
function getData() {
|
|
loading.value = true;
|
|
|
|
banner({ locals: "关于我们" })
|
|
.then((resp) => {
|
|
state.banner = resp.data[0].images;
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
// 获取关于我们列表
|
|
getAboutList()
|
|
.then((resp) => {
|
|
console.log("baout", resp);
|
|
state.data = resp.data;
|
|
loading.value = false;
|
|
})
|
|
.catch(() => {
|
|
loading.value = false;
|
|
});
|
|
}
|
|
onMounted(() => {
|
|
getData();
|
|
});
|
|
function handleActive(id) {
|
|
kindId.value = id;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.about {
|
|
background-color: #f2f6ff;
|
|
.box {
|
|
margin-bottom: 30px;
|
|
padding-top: 20px;
|
|
display: flex;
|
|
._l {
|
|
width: 230px;
|
|
margin-right: 14px;
|
|
._item {
|
|
text-align: center;
|
|
height: 53px;
|
|
line-height: 53px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
._r {
|
|
flex: 1;
|
|
background: #fff;
|
|
padding: 20px 40px;
|
|
h3 {
|
|
font-weight: 600;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
color: #333333;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|