Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main
This commit is contained in:
liuyalei
commit
3c53d5f6f0
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
|
|
@ -39,9 +39,9 @@
|
||||||
<div
|
<div
|
||||||
class="main-list"
|
class="main-list"
|
||||||
:class="[chooseId == item.id ? 'numa' : '']"
|
:class="[chooseId == item.id ? 'numa' : '']"
|
||||||
v-for="(item, index) in mainList"
|
v-for="(item, index) in data.mainList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="choose(item.id)"
|
@click="choose(item.id, item.title)"
|
||||||
>
|
>
|
||||||
<div :class="[chooseId == item.id ? 'numa' : '']">
|
<div :class="[chooseId == item.id ? 'numa' : '']">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
|
|
@ -58,16 +58,16 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="titles">
|
<div class="titles">
|
||||||
<span
|
<span
|
||||||
v-for="(item, index) in mainLists"
|
v-for="(item, index) in data.mainLists"
|
||||||
:key="item"
|
:key="item"
|
||||||
class="tabtitle"
|
class="tabtitle"
|
||||||
:class="[cNum == item.id ? 'tabtitles' : '']"
|
:class="[cNum == item.id ? 'tabtitles' : '']"
|
||||||
@click="clickFun(item.id)"
|
@click="clickFun(item.id, item.title)"
|
||||||
>{{ item.title }}</span
|
>{{ item.title }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div v-for="(data, index) in records.list" :key="data.id">
|
<div v-for="(data, index) in data.list" :key="data.id">
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<div class="linetop">
|
<div class="linetop">
|
||||||
<img :src="data.imgurl" alt="" />
|
<img :src="data.imgurl" alt="" />
|
||||||
|
|
@ -104,6 +104,8 @@ import b1 from "../../assets/dzdp1.png";
|
||||||
import b2 from "../../assets/dzdp2.png";
|
import b2 from "../../assets/dzdp2.png";
|
||||||
import f1 from "../../assets/pf.png";
|
import f1 from "../../assets/pf.png";
|
||||||
import f2 from "../../assets/pf1.png";
|
import f2 from "../../assets/pf1.png";
|
||||||
|
import y1 from "../../assets/yy.png";
|
||||||
|
import y2 from "../../assets/yy1.png";
|
||||||
|
|
||||||
let bd_data = reactive([
|
let bd_data = reactive([
|
||||||
{ name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
|
{ name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
|
||||||
|
|
@ -118,15 +120,15 @@ const mainList = reactive([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: "老有康养",
|
title: "幼有善育",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: "老有康养",
|
title: "学有优教",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: "老有康养",
|
title: "劳有所得",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
|
|
@ -191,84 +193,282 @@ const records = reactive({
|
||||||
rate: "职业学校",
|
rate: "职业学校",
|
||||||
comment: "老师非常耐心，课程也很丰富！",
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 1,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 1,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
const data = reactive([
|
const data = reactive({
|
||||||
{
|
mainList: [
|
||||||
name: "老有康养",
|
{
|
||||||
lists: [
|
id: 1,
|
||||||
{
|
title: "老有康养",
|
||||||
name: "老年学校",
|
},
|
||||||
lists: [
|
{
|
||||||
{
|
id: 2,
|
||||||
imgurl: b2,
|
title: "幼有善育",
|
||||||
name: "象山老年大学",
|
},
|
||||||
address: "宁波市象山县广场路39号",
|
{
|
||||||
Scoring: 4,
|
id: 3,
|
||||||
rate: "职业学校",
|
title: "学有优教",
|
||||||
comment: "老师非常耐心，课程也很丰富！",
|
},
|
||||||
},
|
{
|
||||||
],
|
id: 4,
|
||||||
},
|
title: "劳有所得",
|
||||||
{
|
},
|
||||||
name: "养老服务中心",
|
{
|
||||||
lists: [
|
id: 5,
|
||||||
{
|
title: "老有康养",
|
||||||
imgurl: b2,
|
},
|
||||||
name: "象山老年大学",
|
{
|
||||||
address: "宁波市象山县广场路39号",
|
id: 6,
|
||||||
Scoring: 3,
|
title: "老有康养",
|
||||||
rate: "职业学校",
|
},
|
||||||
comment: "老师非常耐心，课程也很丰富！",
|
{
|
||||||
},
|
id: 7,
|
||||||
],
|
title: "老有康养",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
mainLists: [
|
||||||
{
|
{
|
||||||
name: "幼有善育",
|
id: 1,
|
||||||
lists: [
|
title: "老年学校",
|
||||||
{
|
},
|
||||||
name: "老年学校",
|
{
|
||||||
lists: [
|
id: 2,
|
||||||
{
|
title: "养老服务中心",
|
||||||
imgurl: b2,
|
},
|
||||||
name: "象山老年大学",
|
{
|
||||||
address: "宁波市象山县广场路39号",
|
id: 3,
|
||||||
Scoring: 4,
|
title: "养老机构食堂",
|
||||||
rate: "职业学校",
|
},
|
||||||
comment: "老师非常耐心，课程也很丰富！",
|
// {
|
||||||
},
|
// id: 4,
|
||||||
],
|
// title: "老有康养",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "养老服务中心",
|
// id: 5,
|
||||||
lists: [
|
// title: "老有康养",
|
||||||
{
|
// },
|
||||||
imgurl: b2,
|
// {
|
||||||
name: "象山老年大学",
|
// id: 6,
|
||||||
address: "宁波市象山县广场路39号",
|
// title: "老有康养",
|
||||||
Scoring: 3,
|
// },
|
||||||
rate: "职业学校",
|
// {
|
||||||
comment: "老师非常耐心，课程也很丰富！",
|
// id: 7,
|
||||||
},
|
// title: "老有康养",
|
||||||
],
|
// },
|
||||||
},
|
],
|
||||||
],
|
list: [
|
||||||
},
|
{
|
||||||
]);
|
id: 1,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 4,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 1,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// imgurl: b2,
|
||||||
|
// title: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 1,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// imgurl: b2,
|
||||||
|
// title: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 1,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// {
|
||||||
|
// name: "老有康养",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// name: "老年学校",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// imgurl: b2,
|
||||||
|
// name: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 4,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "养老服务中心",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// imgurl: b2,
|
||||||
|
// name: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 3,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "幼有善育",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// name: "老年学校",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// imgurl: b2,
|
||||||
|
// name: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 4,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "养老服务中心",
|
||||||
|
// lists: [
|
||||||
|
// {
|
||||||
|
// imgurl: b2,
|
||||||
|
// name: "象山老年大学",
|
||||||
|
// address: "宁波市象山县广场路39号",
|
||||||
|
// Scoring: 3,
|
||||||
|
// rate: "职业学校",
|
||||||
|
// comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
});
|
||||||
const bdDetails = (name) => {
|
const bdDetails = (name) => {
|
||||||
alert(name);
|
alert(name);
|
||||||
// router.push(path)
|
// router.push(path)
|
||||||
};
|
};
|
||||||
const bdName = ref("老有康养");
|
const bdName = ref("老有康养");
|
||||||
const cNum = ref(1);
|
const cNum = ref(1);
|
||||||
const clickFun = (index) => {
|
const clickFun = (index, name) => {
|
||||||
|
console.log(index, name);
|
||||||
cNum.value = index;
|
cNum.value = index;
|
||||||
};
|
};
|
||||||
const chooseId = ref("1");
|
const chooseId = ref("1");
|
||||||
const choose = (id) => {
|
const choose = (index, name) => {
|
||||||
chooseId.value = id;
|
console.log(index, name);
|
||||||
|
// data.mainLists = [];
|
||||||
|
// data.list = [];
|
||||||
|
switch (name) {
|
||||||
|
case "老有康养":
|
||||||
|
data.mainLists = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "老年学校",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "养老服务中心",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "养老机构食堂",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data.list = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 4,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
imgurl: b2,
|
||||||
|
title: "象山老年大学",
|
||||||
|
address: "宁波市象山县广场路39号",
|
||||||
|
Scoring: 1,
|
||||||
|
rate: "职业学校",
|
||||||
|
comment: "老师非常耐心，课程也很丰富！",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
case "幼有善育":
|
||||||
|
data.mainLists = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "妇幼保健机构",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "托育机构",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "妇女儿童医院",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
data.list = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
imgurl: y1,
|
||||||
|
title: "象山妇幼保健院",
|
||||||
|
address: "宁波市象山县城东路1号",
|
||||||
|
Scoring: 4,
|
||||||
|
rate: "妇幼医院",
|
||||||
|
comment: "环境很好，护士都很周到。",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
imgurl: y2,
|
||||||
|
title: "西周妇幼保健院",
|
||||||
|
address: "宁波市象山县西周镇广场路27号",
|
||||||
|
Scoring: 3,
|
||||||
|
rate: "妇幼医院",
|
||||||
|
comment: "设施很全，医生很有耐心！",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
chooseId.value = index;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -446,12 +646,16 @@ const choose = (id) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.list {
|
.list {
|
||||||
height: 150px;
|
// height: 30vh;
|
||||||
|
// border: 1px solid red;
|
||||||
|
height: calc(100vh - 422px);
|
||||||
width: 355px;
|
width: 355px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
overflow-x: auto; /* 允许横向滚动 */
|
||||||
|
white-space: nowrap; /* 防止换行 */
|
||||||
.line {
|
.line {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
width: 345px;
|
width: 355px;
|
||||||
height: 132px;
|
height: 132px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0px 2px 12px 0px #ebeef3;
|
box-shadow: 0px 2px 12px 0px #ebeef3;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue