<template>
|
<div class="HY-box" v-myTitle="{ title: m_Title }">
|
<!-- 头部导航栏 -->
|
<van-nav-bar style="background-color: #528abe">
|
<template #left>
|
<div @click="pageBack" style="display: flex; align-items: center">
|
<van-icon name="arrow-left" size="18" />
|
<span>{{$t('selectPage.index.TR')}}</span>
|
</div>
|
</template>
|
<template #title>
|
<label>{{$t('indexPage.byIndustry.TR')}}</label>
|
</template>
|
<template #right>
|
<!-- <van-icon name="search" size="18" /> -->
|
</template>
|
</van-nav-bar>
|
<!-- 公司标题 -->
|
<div style="width: 100%">
|
<!-- <img
|
src="/static/img/Title.png"
|
style="max-width: 100%; max-height: 100%; width: auto; height: 65px"
|
/> -->
|
</div>
|
<!-- 显示内容 -->
|
<div class="HY-main" style="height: calc(100% - 50px);">
|
<div style="width: 100%; position: relative">
|
<van-cell
|
is-link
|
v-for="hyItem in m_HangYeList"
|
:key="hyItem.Name"
|
:style="'background-color:' + hyItem.bkColor"
|
@click="goPumpDetail(hyItem)"
|
>
|
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
<template #icon>
|
<img :src="hyItem.ImageSrc" style="width: 32px; height: 32px" />
|
</template>
|
<!-- 使用 title 插槽来自定义标题 -->
|
<template #title>
|
<span class="custom-title">{{ hyItem.Name }}</span>
|
</template>
|
</van-cell>
|
</div>
|
<!-- </van-collapse-item>
|
</van-collapse>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import languageMixin from "@/mixin/language";
|
export default {
|
mixins: [languageMixin],
|
data() {
|
return {
|
m_HangYeList: [], //类型列表
|
m_Title:"",
|
};
|
},
|
mounted() {
|
this.m_Title = this.getSoftName();
|
this.buildHangYeList(this.$i18n.locale);
|
},
|
methods: {
|
//跳转到详情
|
goPumpDetail(hyItem) {
|
this.$router.push({
|
path: `/${this.$getCurrentLanguageUrl()}/SeriesHY`,
|
query: { HID: hyItem.HID},
|
});
|
},
|
buildHangYeList(langType) {
|
let hangYeList = window.seriesApplication.HangYe.List;
|
let list = [];
|
if (langType == "cn") {
|
hangYeList.forEach((element, index) => {
|
// console.log(element.ID,77)
|
let itemObj = {
|
HID:element.ID,
|
PumpSeriesID: element.PumpSeriesID,
|
Name: element.NameCN,
|
ImageSrc:require(
|
"../../assets/img/HangYe/" + element.ImageName + "/ffffffx128.png"),
|
};
|
if (index % 2 == 0) {
|
itemObj.bkColor = "#aaaaaa";
|
} else {
|
itemObj.bkColor = "#ffffff";
|
}
|
list.push(itemObj);
|
});
|
}
|
if (langType == "en") {
|
hangYeList.forEach((element, index) => {
|
let itemObj = {
|
HID:element.ID,
|
PumpSeriesID: element.PumpSeriesID,
|
Name: element.NameEN,
|
ImageSrc:require("../../assets/img/HangYe/" + element.ImageName + "/ffffffx128.png"),
|
};
|
if (index % 2 == 0) {
|
itemObj.bkColor = "#aaaaaa";
|
} else {
|
itemObj.bkColor = "#ffffff";
|
}
|
list.push(itemObj);
|
});
|
}
|
this.m_HangYeList = list;
|
},
|
//返回上一页
|
pageBack() {
|
this.$router.push({
|
path: `/${this.$getCurrentLanguageUrl()}/Index`,
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@import url("../../assets/css/page.css");
|
.HY-box {
|
background: #fafafa;
|
width: 100%;
|
height: 100vh;
|
.van-cell__title {
|
text-align: start;
|
display: flex;
|
align-items: center;
|
padding: 10px !important;
|
color: #000000 !important;
|
}
|
.HY-main {
|
width: 100%;
|
height: calc(100% - 115px);
|
overflow: auto;
|
.van-cell {
|
color: #000000 !important;
|
padding: 5px 15px !important;
|
align-items: center;
|
}
|
.van-cell__right-icon {
|
color: #bbb;
|
}
|
.van-cell::after {
|
border-bottom: unset;
|
}
|
}
|
}
|
</style>
|
