williamet/cas_tt_cloud_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解决方案查看更多

Browse Source
This commit is contained in:
熊丽君
2022-01-04 14:11:17 +08:00
parent 6c59ae9f7f
commit ea5f4b6ff9
13 changed files with 424 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/styles/index.scss
View File

@ -139,6 +139,14 @@ aside {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.sub-navbar {
height: 50px;
line-height: 50px;
@ -196,6 +204,10 @@ aside {
width: 1000px;
margin: 0 auto;
}
.conter1400 {
width: 1400px;
margin: 0 auto;
}
// 2行文本省略号
.text_hidden {
overflow: hidden;

16
src/router/index.js
View File

@ -42,41 +42,41 @@ export const constantRoutes = [
{
path: 'solution',
name: 'solution',
component: () => import('../views/website/solution.vue'),
component: () => import('../views/website/solution/solution.vue'),
children:[
{
path:'small',
name:'small',
component: () => import('../views/website/small.vue'),
component: () => import('../views/website/solution/small.vue'),
},{
path:'large',
name:'large',
component: () => import('../views/website/large.vue'),
component: () => import('../views/website/solution/large.vue'),
},{
path:'government',
name:'government',
component: () => import('../views/website/government.vue'),
component: () => import('../views/website/solution/government.vue'),
},{
path:'scientific',
name:'scientific',
component: () => import('../views/website/scientific.vue'),
component: () => import('../views/website/solution/scientific.vue'),
},
]
},
{
path: 'innovate',
name: 'innovate',
component: () => import('../views/website/innovate.vue'),
component: () => import('../views/website/innovate/innovate.vue'),
},
{
path: 'activity',
name: 'activity',
component: () => import('../views/website/activity.vue'),
component: () => import('../views/website/activity/activity.vue'),
},
{
path: 'about',
name: 'about',
component: () => import('../views/website/about.vue'),
component: () => import('../views/website/about/about.vue'),
},
]
},

20
src/views/website/about.vue → src/views/website/about/about.vue
View File

@ -4,12 +4,13 @@
<div class="box conter1000">
<div class="_l">
<div
class="_item"
:class="item == 1 ? 'x_fff x_bg_blue' : ''"
v-for="item in 3"
:key="item"
class="_item pointer"
:class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
v-for="item in kindList"
:key="item.id"
@click="handleActive(item.id)"
>
{{ item }}
{{ item.title }}
</div>
</div>
<div class="_r">
@ -44,6 +45,12 @@ const queryParams = reactive({
pageNum: 1,
pageSize: 10,
});
const kindId = ref(1);
const kindList = reactive([
{ id: 1, title: "公司简介" },
{ id: 2, title: "发展历程" },
{ id: 3, title: "联系我们" },
]);
/** 查询 */
function getList() {
loading.value = true;
@ -51,6 +58,9 @@ function getList() {
loading.value = false;
}, 1000);
}
function handleActive(id) {
kindId.value = id;
}
getList();
</script>

23
src/views/website/activity.vue → src/views/website/activity/activity.vue
View File

@ -18,7 +18,7 @@
<el-col :span="14">
<el-input v-model="queryParams.value3" placeholder="请输入关键词">
<template #append>
<el-button class="x_btns">搜索</el-button>
<el-button>搜索</el-button>
</template>
</el-input>
</el-col>
@ -51,7 +51,12 @@
style="border-radius: 0"
>报名</el-button
>
<el-button v-else class="fr x16" type="info" disabled
<el-button
v-else
class="fr x16"
style="border-radius: 0"
type="info"
disabled
>已结束</el-button
>
</div>
@ -93,6 +98,20 @@ getList();
.box {
position: relative;
padding-top: 20px;
.el-input {
::v-deep(.el-input__inner) {
border-right: 0;
}
::v-deep(.el-input-group__append) {
overflow: hidden;
font-size: 16px;
color: #fff;
border-top-color: #0054ff;
border-right-color: #0054ff;
border-bottom-color: #0054ff;
background-color: #0054ff;
}
}
}
._item {
display: flex;

16
src/views/website/innovate.vue → src/views/website/innovate/innovate.vue
View File

@ -19,7 +19,7 @@
placeholder="请输入关键词"
>
<template #append>
<el-button class="x_btns" @click="handleQuery">搜索</el-button>
<el-button @click="handleQuery">搜索</el-button>
</template>
</el-input>
</div>
@ -101,6 +101,20 @@ getList();
._r {
position: relative;
flex: 1;
.el-input {
::v-deep(.el-input__inner) {
border-right: 0;
}
::v-deep(.el-input-group__append) {
overflow: hidden;
font-size: 16px;
color: #fff;
border-top-color: #0054ff;
border-right-color: #0054ff;
border-bottom-color: #0054ff;
background-color: #0054ff;
}
}
._list {
display: flex;
flex-wrap: wrap;

12
src/views/website/small.vue
View File

@ -1,12 +0,0 @@
<template>
<div class="small">small</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.small {
background-color: #ccc;
}
</style>

88
src/views/website/solution/components/seeMore.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="more conter1400">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<span class="_one">{{ oneLevelTitle.title }}</span>
</el-breadcrumb-item>
<el-breadcrumb-item>
<span class="_two">{{ twoLevelTitle }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
<ul class="_list">
<li v-for="item in 36" :key="item">
<el-image
style="width: 100%; height: 135px"
src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
fit="cover"
></el-image>
<div class="_head text_hidden">
盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
</div>
<div class="_detail text_hidden">
江启明电子有限公司自成立以来始终专注于LED显示屏。
</div>
</li>
</ul>
</div>
</template>
<script setup>
const props = defineProps({
isShowMore: {
type: Boolean,
default: true,
},
oneLevelTitle: {
required: true,
type: Object,
},
twoLevelTitle: {
type: String,
default: "查看更多",
},
});
const emit = defineEmits();
// function handleShow() {
// emit("update:isShowMore", false);
// }
</script>
<style lang="scss" scoped>
.more {
padding-top: 30px;
.el-breadcrumb {
padding-bottom: 22px;
._one {
font-size: 16px;
font-weight: 400;
color: #666666;
}
._two {
font-size: 16px;
font-weight: 600 !important;
color: #333333;
}
}
._list {
display: flex;
flex-wrap: wrap;
li {
width: calc(100% / 6);
padding: 0 11px 44px;
._head {
margin: 5px 0;
font-size: 17px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
line-height: 19px;
}
._detail {
font-size: 15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 19px;
}
}
}
}
</style>

0
src/views/website/government.vue → src/views/website/solution/government.vue
View File

0
src/views/website/large.vue → src/views/website/solution/large.vue
View File

0
src/views/website/scientific.vue → src/views/website/solution/scientific.vue
View File

264
src/views/website/solution/small.vue Normal file
View File

@ -0,0 +1,264 @@
<template>
<div class="small">
<div class="_title">
<div style="height: 394px; background-color: #108de9"></div>
<div class="_li" :class="isFixed ? '_fixed' : ''">
<ul class="conter1000">
<li
:class="activeId == item.id ? '_active' : ''"
v-for="(item, index) in caseList"
:key="item.id"
@click="setScrollTop(item.id, index)"
>
{{ item.title }}
</li>
</ul>
</div>
</div>
<div class="box" v-show="!isShowMore">
<div
class="_item"
:ref="setItemRef"
v-once
v-for="(item, index) in caseList"
:key="index"
:data-id="item.id"
>
<h3 class="_tit text-center" style="font-size: 24px; color: #333333">
{{ item.title }}
</h3>
<div class="_info conter1000">
<div class="_r" v-if="isOddEvenNumber(index)">img</div>
<div
class="_l"
:class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
>
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
{{ item.title }}
</h3>
<!-- <p>{{ item.description }}</p> -->
<p>
本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
</p>
</div>
<div class="_r" v-if="!isOddEvenNumber(index)">img</div>
</div>
<div class="_list conter1400">
<ul>
<li v-for="item in 6" :key="item">
<el-image
style="width: 100%; height: 135px"
src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
fit="cover"
></el-image>
<div class="_head text_hidden">
盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
</div>
<div class="_detail text_hidden">
江启明电子有限公司自成立以来始终专注于LED显示屏。
</div>
</li>
</ul>
<div class="_liBtn text-right">
<el-button class="x_btns" @click="handleShowMore(item)"
>查看更多</el-button
>
</div>
</div>
</div>
</div>
<seeMore
v-show="isShowMore"
v-model:isShowMore="isShowMore"
v-model:oneLevelTitle="oneLevelTitle"
></seeMore>
</div>
</template>
<script setup>
import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue";
const oneLevelTitle = ref({});
const isShowMore = ref(false);
const activeId = ref("");
const itemRefs = [];
const setItemRef = (el) => {
if (el) {
itemRefs.push(el);
}
};
const caseList = reactive([
{
id: "1",
title: "宣传介绍1",
description: "方案详细描述",
image: "",
},
{
id: "2",
title: "宣传介绍2",
description: "方案详细描述",
image: "",
},
{
id: "3",
title: "宣传介绍3",
description: "方案详细描述",
image: "",
},
]);
const scrollTop = ref(0);
const isFixed = ref(false);
onMounted(() => {
activeId.value = caseList[0].id;
document.addEventListener("scroll", () => {
scrollTop.value = getScroll().top;
if (scrollTop.value >= 394) {
isFixed.value = true;
} else {
isFixed.value = false;
}
itemRefs.map((item) => {
if (isShowMore.value) return false;
if (scrollTop.value >= item.offsetTop - 80) {
activeId.value = item.getAttribute("data-id");
}
});
});
});
function getScroll() {
return {
left:
window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0,
top:
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0,
};
}
function setScrollTop(id, index) {
// if (isShowMore.value) return false;
isShowMore.value = false;
nextTick(() => {
window.scrollTo({
// - 80
top: itemRefs[index].offsetTop,
});
});
activeId.value = id;
}
function isOddEvenNumber(num) {
return num % 2 == 0 ? false : true;
}
function handleShowMore(item) {
oneLevelTitle.value = item;
window.scrollTo({
top: 0,
});
isShowMore.value = true;
}
</script>
<style lang="scss" scoped>
.small {
background-color: #fff;
._title {
position: relative;
._li {
position: absolute;
bottom: 0;
width: 100%;
height: 48px;
background: rgba(0, 0, 0, 0.2);
> ul {
display: flex;
height: 48px;
line-height: 48px;
li {
flex: 1;
text-align: center;
font-size: 18px;
color: #ffffff;
display: inline-block;
cursor: pointer;
}
._active {
background: #000000;
}
}
}
._fixed {
position: fixed;
top: 80px;
z-index: 1;
background-color: #ccc;
}
}
.box {
._item {
._tit {
margin: 0;
padding: 100px 0 60px;
}
._info {
display: flex;
._paddingr {
padding-right: 63px;
}
._paddingl {
padding-left: 63px;
}
._l {
flex: 1;
h3 {
font-size: 18px;
font-weight: 500;
color: #333333;
}
p {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
._r {
width: 520px;
background: #f2f6ff;
}
}
}
._list {
margin-top: 86px;
> ul {
display: flex;
li {
width: calc(100% / 6);
padding: 0 11px;
._head {
margin: 5px 0;
font-size: 17px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
line-height: 19px;
}
._detail {
font-size: 15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 19px;
}
}
}
._liBtn {
margin-top: 36px;
}
}
}
}
</style>

0
src/views/website/solution.vue → src/views/website/solution/solution.vue
View File

1
src/views/websiteLayout.vue
View File

@ -4,6 +4,7 @@
<div class="content">
<router-view />
</div>
<el-backtop />
</div>
</template>