Files
quantulr 88e3b00298 fixed
2022-10-19 00:22:39 +08:00

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>