解决方案&创新服务&活动报名

This commit is contained in:
hh
2022-01-18 18:55:17 +08:00
parent ea36a118c4
commit 052f18cae4
22 changed files with 1374 additions and 310 deletions

View File

@ -7,6 +7,6 @@
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";
import DevicePixelRatio from './utils/devicePixelRatio';
onMounted(() => {
new DevicePixelRatio().init();
// new DevicePixelRatio().init();
})
</script>

View File

@ -38,4 +38,21 @@ export function company() {
url: '/v1/index/distribution/company',
method: 'get'
})
}
}
// 获取banner
export function banner (key) {
return request({
url: '/v1/sys/banner',
method: 'get',
params: { key }
})
}
// 行业领域信息
export function industry () {
return request({
url: '/v1/sys/industry',
method: 'get',
})
}

View File

@ -237,3 +237,8 @@ aside {
.x_bg_blue{
background-color: #0054ff !important;
}
// 富文本图片
.html img {
max-width: 100%;
}

View File

@ -3,7 +3,7 @@
<el-pagination
:background="background"
v-model:current-page="currentPage"
:page-size="pageSize"
v-model:page-size="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:pager-count="pagerCount"

View File

@ -157,7 +157,7 @@ dt {
.show_box {
display: none;
position: absolute;
bottom: -170px;
top: 80px;
width: 100%;
text-align: center;
background-color: red;

View File

@ -44,7 +44,6 @@
<script setup>
import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi'
const visible = ref(false);
const top = ref(0);
const left = ref(0);

View File

@ -40,38 +40,41 @@ export const constantRoutes = [
component: () => import('../views/website/index/index.vue'),
},
{
path: 'solution',
path: 'solution/:name',
name: 'solution',
component: () => import('../views/website/solution/solution.vue'),
children:[
{
path:'small',
name:'small',
component: () => import('../views/website/solution/small.vue'),
},{
path:'large',
name:'large',
component: () => import('../views/website/solution/large.vue'),
},{
path:'government',
name:'government',
component: () => import('../views/website/solution/government.vue'),
},{
path:'scientific',
name:'scientific',
component: () => import('../views/website/solution/scientific.vue'),
},
]
},
{
path: 'solution/detail/:id',
name: 'solutionDetail',
component: () => import('../views/website/solution/detail.vue'),
},
{
path: 'innovate',
name: 'innovate',
component: () => import('../views/website/innovate/innovate.vue'),
},
{
path: 'innovate/detail/:id',
name: 'innovateDetail',
component: () => import('../views/website/innovate/detail.vue'),
},
{
path: 'activity',
name: 'activity',
component: () => import('../views/website/activity/activity.vue'),
children:[
{
path: '',
name: 'activityList',
component: () => import('../views/website/activity/list.vue'),
},
{
path: 'detail/:id',
name: 'activityDetail',
component: () => import('../views/website/activity/detail.vue'),
},
]
},
{
path: 'about',

View File

@ -1,21 +1,26 @@
<template>
<div class="about">
<div style="height: 394px; background-color: #ccc"></div>
<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"
:class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
v-for="item in kindList"
v-for="(item,index) in state.data"
:class="index == kindId ? 'x_fff x_bg_blue' : ''"
:key="item.id"
@click="handleActive(item.id)"
>
{{ item.title }}
</div>
@click="handleActive(index)"
>{{ item.title }}</div>
</div>
<div class="_r" v-loading="loading">
<div class="_r">
<div v-if="state.data.length" class="html" v-html="state.data[kindId]['content']"></div>
<!-- 公司简介---后期可能是接收富文本内容 -->
<h3>公司简介</h3>
<!-- <h3>公司简介</h3>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
@ -31,7 +36,7 @@
</p>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
</p>-->
</div>
</div>
<webFooter></webFooter>
@ -40,32 +45,47 @@
<script setup>
import webFooter from "@/components/webFooter/index.vue";
const input3 = ref("");
import request from '@/utils/request'
import { banner } from "@/api/website/home/index";
function about () {
return request({
url: '/v1/sys/about',
method: 'get',
})
}
const loading = ref(true);
const total = ref(1);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
const state = reactive({
data: [],
banner: ''
});
const kindId = ref(1);
const kindList = reactive([
{ id: 1, title: "公司简介" },
{ id: 2, title: "发展历程" },
{ id: 3, title: "联系我们" },
]);
const kindId = ref(0);
/** 查询 */
function getList() {
function getData () {
loading.value = true;
setTimeout(() => {
banner('关于我们').then(res => {
if (200 == res.code) {
state.banner = res.data.images
loading.value = false;
}
}).catch(() => {
loading.value = false;
}, 1000);
})
console.log('baout1')
about().then(res => {
console.log('baout2')
if (200 == res.code) {
console.log('baout', res)
state.data = res.data;
}
})
}
function handleActive(id) {
onMounted(() => {
getData()
});
function handleActive (id) {
kindId.value = id;
getList();
}
getList();
</script>
<style lang="scss" scoped>

View File

@ -1,12 +1,21 @@
<template>
<div class="activity">
<div class="activity" v-loading="loading">
<webReleaseActive v-model:dialogVisible="dialogVisible"></webReleaseActive>
<div class="_banner" style="height: 394px; background-color: #ccc">
<div v-if="!state.banner" class="_banner" style="height: 394px; background-color: #ccc">
<div class="_publish conter1000">
<el-button @click="dialogVisible = true">发布活动</el-button>
</div>
</div>
<div class="box conter1000" v-show="!isShow">
<div v-else class="_banner" style="height: 394px;background-size: cover;" :style="{backgroundImage: `url(${state.banner})`}">
<div class="_publish conter1000">
<el-button @click="dialogVisible = true">发布活动</el-button>
</div>
</div>
<div>
<router-view />
</div>
<!-- <div class="box conter1000" v-show="!isShow">
<el-row :gutter="10">
<el-col :span="5">
<el-select
@ -128,11 +137,13 @@
</div>
<div class="_r">联系我</div>
</div>
</div>
</div> -->
<webFooter></webFooter>
</div>
</template>
<script setup>
import { banner } from "@/api/website/home/index";
import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import webReleaseActive from "@/components/webReleaseActive/index.vue";
@ -140,12 +151,8 @@ import webReleaseActive from "@/components/webReleaseActive/index.vue";
const dialogVisible = ref(false);
const loading = ref(true);
const total = ref(1);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
value: "",
value2: "",
value3: "",
const state = reactive({
banner: ''
});
let dataList = ref([]);
const isShow = ref(false);
@ -197,6 +204,17 @@ function handleDetail(item) {
isShow.value = !isShow.value;
}
getList();
onMounted(() => {
banner('活动报名').then(res => {
if (200 == res.code) {
state.banner = res.data.images
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
});
</script>
<style lang="scss" scoped>
.activity {

View File

@ -0,0 +1,158 @@
<template>
<div class="box conter1000">
<div class="_head">
<div class="_l">
<el-image
style="width: 358px; height: 100%; vertical-align: middle"
:src="state.data.image"
fit="cover"
></el-image>
</div>
<div class="_r">
<p class="_title text_hidden">{{state.data.title }}</p>
<p class="_brief text_hidden">
<!-- 修改样式 -->
活动简介{{state.data.description || '暂无'}}</p>
<p class="_classif">活动分类{{state.data.industry}}</p>
<p class="_time">
活动时间{{ parseTime(state.data.begin_at) }} ~ {{parseTime(state.data.finish_at) }}
</p>
<p class="_place text_hidden">
活动地点{{state.data.address}}
</p>
<p class="_user">
<el-button class="x_btns" disabled>已报名</el-button>
<span class="_num"><span class="x_blue">{{state.data.join_count}}</span> 人报名</span>
</p>
</div>
</div>
<div class="_info">
<div class="_l">
<p class="_tit">活动详情</p>
<div class="html" v-html="state.data.content"></div>
</div>
<div class="_r">联系我</div>
</div>
</div>
</template>
<script setup>
import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import request from '@/utils/request'
function detail (id) {
return request({
url: '/v1/activity/detail',
method: 'post',
data: { id }
})
}
const loading = ref(true);
const state = reactive({
data: {},
});
const route = useRoute();
watch(route, () => {
getData()
})
onMounted(() => {
getData()
});
function getData () {
let id = route.params.id;
if (!id) return
detail(id).then(res => {
if (200 == res.code) {
state.data = res.data;
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
</script>
<style lang="scss" scoped>
.box {
._head {
padding: 20px;
background-color: #fff;
display: flex;
._r {
padding-left: 18px;
p {
margin: 11px 0;
}
._title {
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 30px;
height: 60px;
}
._brief,
._classif,
._time,
._place {
font-size: 14px;
font-weight: 400;
color: #666666;
}
._brief, ._place {
line-height: 24px;
height: 48px;
}
._user {
margin-bottom: 0;
display: flex;
align-items: flex-end;
._num {
margin-left: 10px;
font-size: 16px;
font-weight: 400;
color: #666666;
.x_blue {
font-size: 30px;
}
}
}
}
}
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
._r {
flex: 1;
background-color: #fff;
}
}
}
</style>

View File

@ -0,0 +1,289 @@
<template>
<div>
<div class="box conter1000">
<el-row :gutter="10" style="margin-bottom: 10px;">
<el-col :span="8">
<el-select
style="width: 100%;"
placeholder="请选择"
v-model="state.id1"
@change="state.id2 = ''"
clearable
>
<el-option
v-for="option in state.industryList"
:key="option.id"
:value="option.id"
:label="option.name"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-select
style="width: 100%;"
placeholder="请选择"
v-model="state.id2"
@change="state.id3 = ''"
clearable
>
<el-option
v-for="option in searchIndustryData(state.id1)['children']"
:key="option.id"
:value="option.id"
:label="option.name"
/>
</el-select>
</el-col>
<el-col :span="8">
<el-select style="width: 100%;" placeholder="请选择" v-model="state.id3" clearable>
<el-option
v-for="option in searchIndustryData(state.id2)['children']"
:key="option.id"
:value="option.id"
:label="option.name"
/>
</el-select>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-select style="width: 100%;" placeholder="活动状态" v-model="state.status">
<el-option
v-for="option in [{ status: 1, name: '未开始' }, { status: 2, name: '进行中' }, { status: 3, name: '已结束' },]"
:key="option.status"
:value="option.status"
:label="option.name"
/>
</el-select>
</el-col>
<el-col :span="16">
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="21">
<el-input v-model="state.title" placeholder="请输入关键词"></el-input>
</el-col>
<el-col :span="3" style="text-align: right;">
<el-button type="primary" @click="handleQuery">搜索</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
<div v-loading="loading">
<div
class="_item pointer"
v-for="item in state.list"
:key="item.id"
@click="handleDetail(item.id)"
>
<div class="_l">
<el-image
style="width: 358px; height: 200px; vertical-align: middle"
:src="item.image"
fit="fill"
></el-image>
</div>
<div class="_r">
<p class="text_hidden">{{ item.title }}</p>
<div
class="_time"
>活动时间{{ parseTime(item.begin_at) }} - {{ parseTime(item.finish_at) }}</div>
<div class="_info">
<span class="fl">
<span class="x_blue">{{ item.join_count }}</span> 人报名
</span>
<el-button
class="fr x16"
style="border-radius: 0"
type="info"
v-if="item.status == 1"
disabled
>未开始</el-button>
<el-button
v-else-if="item.status == 2"
class="fr x16 x_blue x_border_blue"
style="border-radius: 0"
>报名</el-button>
<el-button
v-if="item.status == 3"
class="fr x16"
style="border-radius: 0"
type="info"
disabled
>已结束</el-button>
</div>
</div>
</div>
</div>
<pagination
class="pagination"
:total="state.total"
:pageSizes="state.pageSizes"
v-model:page="state.pageNum"
v-model:limit="state.pageSize"
:autoScroll="false"
@pagination="getDataList"
/>
</div>
</div>
</template>
<script setup>
import request from '@/utils/request'
import { industry } from "@/api/website/home/index";
const router = useRouter();
const loading = ref(true);
const state = reactive({
kind: [],
kindId: '',
list: [],
pageNum: 1,
total: 1,
pageSize: 10,
pageSizes: [10, 10 << 1, 10 << 2, 10 << 3],
title: "",
industryList: [],
id1: '',
id2: '',
id3: '',
});
let treeData = [];
function searchIndustryData (code) {
return deepFindTree(code, treeData);
}
function deepFindTree (code, arr) {
let snap = false;
for (let index = 0; index < arr.length; index++) {
const ele = arr[index];
if (code == ele.id) {
snap = ele;
break;
} else if (ele['children'] != null) {
snap = deepFindTree(code, ele['children']);
if (snap) {
break;
}
} else {
snap = false;
}
}
return snap;
}
function activity () {
let industry = '';
if (state.id1) {
industry += state.id1;
}
if (state.id2) {
industry += `-${state.id2}`;
}
if (state.id3) {
industry += `-${state.id3}`;
}
return request({
url: '/v1/activity',
method: 'post',
data: { industry, status: state.status, page_num: state.pageNum, page_size: state.pageSize, title: state.title }
})
}
function getDataList () {
loading.value = true;
activity().then(res => {
if (200 == res.code) {
state.total = res.data.count;
state.list = res.data.data;
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
onMounted(() => {
init();
});
function init () {
loading.value = true;
industry().then(res => {
if (200 == res.code) {
state.industryList = res.data;
treeData = res.data;
console.log('++++++')
console.log(searchIndustryData(15))
}
})
getDataList();
}
function handleDetail (id) {
let routeData = router.resolve({ path: `/activity/detail/${id}` });
window.open(routeData.href, '_blank');
}
function handleQuery () {
state.pageNum = 1;
getDataList();
}
</script>
<style lang="scss" scoped>
.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;
margin-top: 16px;
._r {
flex: 1;
padding: 36px 20px 0 16px;
background-color: #fff;
p {
margin-top: 0;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 30px;
}
._time {
margin-bottom: 7px;
font-size: 16px;
font-weight: 400;
color: #666666;
}
._info {
.fl {
font-size: 16px;
font-weight: 400;
color: #666666;
span {
font-size: 30px;
}
}
}
}
}
}
</style>

View File

@ -137,16 +137,16 @@ onMounted(async () => {
loading.value = false;
}
});
let echartsDomList = document.querySelectorAll('.echartsDom');
// 兼容echarts
echartsDomList.forEach(element => {
element.style.zoom = window.devicePixelRatio;
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
element.style.transformOrigin = "0%0%";
element.style.width = window.devicePixelRatio * 100 + '%';
element.style.height = window.devicePixelRatio * 100 + '%';
console.log(element.style.zoom, 'element.style.zoom')
});
// let echartsDomList = document.querySelectorAll('.echartsDom');
// // 兼容echarts
// echartsDomList.forEach(element => {
// element.style.zoom = window.devicePixelRatio;
// element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
// element.style.transformOrigin = "0%0%";
// element.style.width = window.devicePixelRatio * 100 + '%';
// element.style.height = window.devicePixelRatio * 100 + '%';
// console.log(element.style.zoom, 'element.style.zoom')
// });
let height = document.body.clientHeight;
let width = document.body.clientWidth;
@ -417,10 +417,10 @@ function loadMap (mapName, data) {
}
}
.leftBox {
left: 230px;
left: 10%;
}
.rightBox {
right: 230px;
right: 10%;
max-height: 465px !important;
}

View File

@ -137,16 +137,16 @@ onMounted(async () => {
loading.value = false;
}
});
let echartsDomList = document.querySelectorAll('.echartsDom');
// 兼容echarts
echartsDomList.forEach(element => {
element.style.zoom = window.devicePixelRatio;
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
element.style.transformOrigin = "0%0%";
element.style.width = window.devicePixelRatio * 100 + '%';
element.style.height = window.devicePixelRatio * 100 + '%';
console.log(element.style.zoom, 'element.style.zoom')
});
// let echartsDomList = document.querySelectorAll('.echartsDom');
// // 兼容echarts
// echartsDomList.forEach(element => {
// element.style.zoom = window.devicePixelRatio;
// element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
// element.style.transformOrigin = "0%0%";
// element.style.width = window.devicePixelRatio * 100 + '%';
// element.style.height = window.devicePixelRatio * 100 + '%';
// console.log(element.style.zoom, 'element.style.zoom')
// });
let height = document.body.clientHeight;
let width = document.body.clientWidth;
@ -416,10 +416,10 @@ function loadMap (mapName, data) {
}
}
.leftBox {
left: 230px;
left: 10%;
}
.rightBox {
right: 230px;
right: 10%;
max-height: 465px !important;
}

View File

@ -137,16 +137,16 @@ onMounted(async () => {
loading.value = false;
}
});
let echartsDomList = document.querySelectorAll('.echartsDom');
// 兼容echarts
echartsDomList.forEach(element => {
element.style.zoom = window.devicePixelRatio;
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
element.style.transformOrigin = "0%0%";
element.style.width = window.devicePixelRatio * 100 + '%';
element.style.height = window.devicePixelRatio * 100 + '%';
console.log(element.style.zoom, 'element.style.zoom')
});
// let echartsDomList = document.querySelectorAll('.echartsDom');
// // 兼容echarts
// echartsDomList.forEach(element => {
// element.style.zoom = window.devicePixelRatio;
// element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
// element.style.transformOrigin = "0%0%";
// element.style.width = window.devicePixelRatio * 100 + '%';
// element.style.height = window.devicePixelRatio * 100 + '%';
// console.log(element.style.zoom, 'element.style.zoom')
// });
let height = document.body.clientHeight;
let width = document.body.clientWidth;
@ -417,10 +417,10 @@ function loadMap (mapName, data) {
}
}
.leftBox {
left: 230px;
left: 10%;
}
.rightBox {
right: 230px;
right: 10%;
max-height: 465px !important;
}

View File

@ -137,16 +137,16 @@ onMounted(async () => {
loading.value = false;
}
});
let echartsDomList = document.querySelectorAll('.echartsDom');
// 兼容echarts
echartsDomList.forEach(element => {
element.style.zoom = window.devicePixelRatio;
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
element.style.transformOrigin = "0%0%";
element.style.width = window.devicePixelRatio * 100 + '%';
element.style.height = window.devicePixelRatio * 100 + '%';
console.log(element.style.zoom, 'element.style.zoom')
});
// let echartsDomList = document.querySelectorAll('.echartsDom');
// // 兼容echarts
// echartsDomList.forEach(element => {
// element.style.zoom = window.devicePixelRatio;
// element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
// element.style.transformOrigin = "0%0%";
// element.style.width = window.devicePixelRatio * 100 + '%';
// element.style.height = window.devicePixelRatio * 100 + '%';
// console.log(element.style.zoom, 'element.style.zoom')
// });
let height = document.body.clientHeight;
let width = document.body.clientWidth;
@ -416,10 +416,10 @@ function loadMap (mapName, data) {
}
}
.leftBox {
left: 230px;
left: 10%;
}
.rightBox {
right: 230px;
right: 10%;
max-height: 465px !important;
}

View File

@ -137,16 +137,16 @@ onMounted(async () => {
loading.value = false;
}
});
let echartsDomList = document.querySelectorAll('.echartsDom');
// 兼容echarts
echartsDomList.forEach(element => {
element.style.zoom = window.devicePixelRatio;
element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
element.style.transformOrigin = "0%0%";
element.style.width = window.devicePixelRatio * 100 + '%';
element.style.height = window.devicePixelRatio * 100 + '%';
console.log(element.style.zoom, 'element.style.zoom')
});
// let echartsDomList = document.querySelectorAll('.echartsDom');
// // 兼容echarts
// echartsDomList.forEach(element => {
// element.style.zoom = window.devicePixelRatio;
// element.style.transform = "scale(" + (1 / window.devicePixelRatio) + ")";
// element.style.transformOrigin = "0%0%";
// element.style.width = window.devicePixelRatio * 100 + '%';
// element.style.height = window.devicePixelRatio * 100 + '%';
// console.log(element.style.zoom, 'element.style.zoom')
// });
let height = document.body.clientHeight;
let width = document.body.clientWidth;
@ -417,10 +417,10 @@ function loadMap (mapName, data) {
}
}
.leftBox {
left: 230px;
left: 10%;
}
.rightBox {
right: 230px;
right: 10%;
max-height: 465px !important;
}

View File

@ -30,7 +30,7 @@ import index7 from './comp/index7.vue';
import index8 from './comp/index8.vue';
let state = reactive({
showBox: 2,
showBox: 0,
boxList: [
{
comp: index1,
@ -156,7 +156,7 @@ const throttle: (func: any, delay: number, immediate?: boolean) => any = (
};
onMounted(() => {
window.addEventListener("mousewheel", throttle(mouseWheelHandler, 600), true);
window.addEventListener("mousewheel", throttle(mouseWheelHandler, 500), true);
});
</script>

View File

@ -0,0 +1,150 @@
<template>
<div class="innovate">
<div class="box conter1000" v-loading="loading">
<div class="head">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<span class="one">情报服务</span>
</el-breadcrumb-item>
<el-breadcrumb-item>
<span>情报服务详情</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="_head">
<p
class="text_hidden"
>{{state.data.title}}</p>
<div class="_tags">
<el-tag class="x_fff x_bg_blue" size="mini">{{state.data.description}}</el-tag>
</div>
<div class="text-right">
<el-button class="x_btns">购买服务</el-button>
</div>
</div>
<div class="_info">
<div class="_l">
<div class="html" v-html="state.data.content"></div>
</div>
<div class="_r">联系我</div>
</div>
</div>
<webFooter></webFooter>
</div>
</template>
<script setup>
import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import request from '@/utils/request'
// to do 创新服务详情
function detail (id) {
return request({
url: '/v1/service/innovate/detail',
method: 'post',
data: { id }
})
}
const loading = ref(true);
const state = reactive({
data: {},
});
const route = useRoute();
watch(route, () => {
getData()
})
onMounted(() => {
getData()
});
function getData () {
let id = route.params.id;
if (!id) return
detail(id).then(res => {
if (200 == res.code) {
state.data = res.data;
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
</script>
<style lang="scss" scoped>
.innovate {
background-color: #f2f6ff;
min-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
.box {
flex: 1;
.head {
padding: 30px 0 20px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
}
.one {
color: #333333;
}
}
._head {
padding: 20px;
background-color: #fff;
p {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 30px;
}
._tags {
margin: 9px 0;
}
}
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
div {
color: #333333;
}
}
}
._r {
flex: 1;
background-color: #fff;
}
}
}
}
</style>

View File

@ -1,163 +1,145 @@
<template>
<div class="innovate">
<div class="box conter1000" v-show="!isShow">
<div class="box conter1000" v-loading="loading">
<div class="_l">
<div
class="_item pointer"
:class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
v-for="item in kindList"
:class="item.id == state.kindId ? 'x_fff x_bg_blue' : ''"
v-for="item in state.kind"
:key="item.id"
@click="handleActive(item.id, item.title)"
>
{{ item.title }}
</div>
>{{ item.title }}</div>
</div>
<div class="_r">
<div style="width: 70%">
<el-input
v-model.trim="queryParams.input3"
placeholder="请输入关键词"
>
<el-input v-model.trim="state.title" placeholder="请输入关键词">
<template #append>
<el-button @click="handleQuery">搜索</el-button>
</template>
</el-input>
</div>
<div class="_list" v-loading="loading">
<div class="item" v-for="item in dataList" :key="item.id">
<div class="_list" v-loading="listLoading">
<div class="item pointer" v-for="item in state.list" :key="item.id">
<div class="_info">
<p class="text_hidden">{{ item.title }}</p>
<div class="_tags">
<el-tag class="x_fff x_bg_blue">{{ item.tag }}</el-tag>
<el-tag class="x_fff x_bg_blue">{{ item.description }}</el-tag>
</div>
</div>
<div class="_detail pointer" @click="handleDetail(item)">
查看详情
</div>
<div class="_detail" @click="handleDetail(item.id)">查看详情</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
class="pagination"
:total="state.total"
:pageSizes="state.pageSizes"
v-model:page="state.pageNum"
v-model:limit="state.pageSize"
:autoScroll="false"
@pagination="getDataList"
/>
</div>
</div>
<div class="box2 conter1000" v-show="isShow">
<webBreadcrumb
v-model:isShow="isShow"
v-model:breadcrumbTitle="breadcrumbTitle"
></webBreadcrumb>
<div class="_head">
<p class="text_hidden">
服务标题/固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术
</p>
<div class="_tags">
<el-tag class="x_fff x_bg_blue" size="mini">服务描述标签</el-tag>
</div>
<div class="text-right">
<el-button class="x_btns">购买服务</el-button>
</div>
</div>
<div class="_info">
<div class="_l">
<p class="_tit">服务介绍</p>
<div class="_txt">
<div>现有基础</div>
本项目将生产废水分质处理后提升进入曝气微电解反应器内通过铁碳原料在酸性情况下形成微电池首先对铜氨络合物破络其次对油墨等有机物质开环断链提高废水的可生化性更突出的是利用金属离子的活性铁置换其他金属离子从而从废水中除去然后经生化系统处理后出水各污染物指标稳定达标排放本项目具有处理效率高以废治废能耗低管理简单出水稳定达标等优点
出水各污染物指标稳定达标排放本项目具有处理效率高以废治废能耗低管理简单出水稳定达标等优点
</div>
<div class="_txt">
<div>现有基础</div>
本项目将生产废水分质处理后提升进入曝气微电解反应器内通过铁碳原料在酸性情况下形成微电池首先对铜氨络合物破络其次对油墨等有机物质开环断链提高废水的可生化性更突出的是利用金属离子的活性铁置换其他金属离子从而从废水中除去然后经生化系统处理后出水各污染物指标稳定达标排放本项目具有处理效率高以废治废能耗低管理简单出水稳定达标等优点
出水各污染物指标稳定达标排放本项目具有处理效率高以废治废能耗低管理简单出水稳定达标等优点
</div>
</div>
<div class="_r">联系我</div>
</div>
</div>
<webFooter></webFooter>
</div>
</template>
<script setup>
import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import request from '@/utils/request'
const router = useRouter();
const loading = ref(true);
const queryParams = reactive({
const listLoading = ref(true);
const state = reactive({
kind: [],
kindId: '',
list: [],
pageNum: 1,
pageSize: 10,
input3: "",
});
const total = ref(1);
const kindId = ref(1);
let kindTitle = ref("情报服务");
const isShow = ref(false);
let breadcrumbTitle = reactive({
id: null,
total: 1,
pageSize: 9,
pageSizes: [9, 9 << 1, 9 << 2, 9 << 3],
title: "",
twoTitle: "",
});
let kindList = ref([]);
let dataList = ref([]);
function getKindList() {
kindList.value = [
{ id: 1, title: "情报服务" },
{ id: 2, title: "高技术服务" },
{ id: 3, title: "情报2服务" },
];
if (kindList.value.length) {
breadcrumbTitle.id = kindList.value[0].id;
breadcrumbTitle.title = kindList.value[0].title;
breadcrumbTitle.twoTitle = kindList.value[0].title + "详情";
}
function kind () {
return request({
url: '/v1/service/innovate/kind',
method: 'get',
})
}
function getDataList() {
function innovate () {
return request({
url: '/v1/service/innovate',
method: 'post',
data: { kind_id: state.kindId, page_num: state.pageNum, page_size: state.pageSize, title: state.title }
})
}
function getDataList () {
listLoading.value = true;
innovate().then(res => {
if (200 == res.code) {
state.total = res.data.count;
state.list = res.data.data;
listLoading.value = false;
}
}).catch(() => {
listLoading.value = false;
})
}
onMounted(() => {
init();
});
function init () {
loading.value = true;
setTimeout(() => {
dataList.value = [
{ id: 1, title: "服务标题", tag: "标签1" },
{ id: 2, title: "服务标题2", tag: "标签2" },
{ id: 3, title: "服务标题3", tag: "标签3" },
{ id: 4, title: "服务标题4", tag: "标签4" },
{ id: 5, title: "服务标题5", tag: "标签5" },
{ id: 6, title: "服务标题6", tag: "标签6" },
];
kind().then(res => {
if (200 == res.code) {
state.kind = res.data;
if (res.data.length > 0) {
state.kindId = res.data[0].id;
getDataList();
}
loading.value = false;
}
}).catch(() => {
loading.value = false;
}, 500);
})
}
function handleActive(id, title) {
breadcrumbTitle.id = id;
breadcrumbTitle.title = title;
breadcrumbTitle.twoTitle = title + "详情";
kindId.value = id;
kindTitle.value = title;
queryParams.pageNum = 1;
queryParams.input3 = "";
function handleDetail (id) {
let routeData = router.resolve({ path: `/innovate/detail/${id}` });
window.open(routeData.href, '_blank');
}
function handleActive (id, title) {
state.kindId = id;
state.pageNum = 1;
state.title = "";
getDataList();
}
function handleQuery() {
queryParams.pageNum = 1;
function handleQuery () {
state.pageNum = 1;
getDataList();
}
function handleDetail(item) {
isShow.value = !isShow.value;
}
getKindList();
getDataList();
</script>
<style lang="scss" scoped>
.innovate {
background-color: #f2f6ff;
min-height: 100%;
display: flex;
flex-direction: column;
.box {
padding-top: 30px;
padding: 30px 0 20px 0;
flex: 1;
box-sizing: border-box;
display: flex;
position: relative;
._l {
width: 230px;
margin-right: 14px;
@ -173,6 +155,14 @@ getDataList();
._r {
position: relative;
flex: 1;
box-sizing: border-box;
padding-bottom: 50px;
.pagination {
position: absolute;
bottom: 0;
right: 20px;
}
.el-input {
::v-deep(.el-input__inner) {
border-right: 0;
@ -222,66 +212,14 @@ getDataList();
color: #333;
font-weight: bold;
font-size: 14px;
&:hover {
color: #fff;
background: #9bbcff;
}
}
&:hover ._detail {
color: #fff;
background: #9bbcff;
}
}
}
}
}
.box2 {
._head {
padding: 20px;
background-color: #fff;
p {
margin: 0;
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 30px;
}
._tags {
margin: 9px 0;
}
}
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
div {
color: #333333;
}
}
}
._r {
flex: 1;
background-color: #fff;
}
}
}
}
</style>

View File

@ -1,6 +1,9 @@
<template>
<div class="more conter1400">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<span class="_one" @click="handleShow()" style="cursor: pointer;">解决方案</span>
</el-breadcrumb-item>
<el-breadcrumb-item>
<span class="_one">{{ oneLevelTitle.title }}</span>
</el-breadcrumb-item>
@ -8,24 +11,51 @@
<span class="_two">{{ twoLevelTitle }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
<ul class="_list">
<li v-for="item in 12" :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>
<ul class="_list" v-loading="loading">
<li v-for="item in state.list" :key="item" @click="handlePath(item.id)">
<el-image style="width: 100%; height: 135px" :src="item.image" fit="cover"></el-image>
<div class="_head text_hidden">{{ item.title }}</div>
<div class="_detail text_hidden">{{ item.description }}</div>
</li>
</ul>
</div>
<div class="conter1400" style="position: relative;">
<pagination
:total="state.total"
:pageSizes="state.pageSizes"
v-model:page="state.pageNum"
v-model:limit="state.pageSize"
:autoScroll="false"
@pagination="getDataList"
/>
</div>
</div>
</template>
<script setup>
import request from '@/utils/request'
const router = useRouter();
function handlePath(id) {
let routeData = router.resolve({ path: `/solution/detail/${id}/`});
window.open(routeData.href, '_blank');
}
function solution_case_list () {
return request({
url: '/v1/service/solution_case/list',
method: 'post',
data: { kind_id: props.oneLevelTitle.id, page_num: state.pageNum, page_size: state.pageSize }
})
}
const loading = ref(true);
const state = reactive({
pageNum: 1,
pageSize: 12,
pageSizes: [12, 12 << 1, 12 << 2, 12 << 3],
total: 0,
list: []
});
const props = defineProps({
isShowMore: {
type: Boolean,
@ -41,9 +71,25 @@ const props = defineProps({
},
});
const emit = defineEmits();
// function handleShow() {
// emit("update:isShowMore", false);
// }
function handleShow () {
emit("update:isShowMore", false);
}
function getDataList () {
loading.value = true;
solution_case_list().then(res => {
if (200 == res.code) {
state.total = res.data.count;
state.list = res.data.data;
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
onMounted(() => {
getDataList()
});
</script>
<style lang="scss" scoped>
.more {
@ -65,8 +111,14 @@ const emit = defineEmits();
display: flex;
flex-wrap: wrap;
li {
cursor: pointer;
width: calc(100% / 6);
padding: 0 11px 44px;
box-sizing: border-box;
&:hover ._head,
&:hover ._detail {
opacity: 0.6;
}
._head {
margin: 5px 0;
font-size: 17px;

View File

@ -0,0 +1,127 @@
<template>
<div class="bg">
<div class="conter1400" v-loading="loading">
<div class="head">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<span class="one">服务案例</span>
</el-breadcrumb-item>
<el-breadcrumb-item>
<span>服务案例详情</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="content">
<div class="title">
<div>{{ state.data.title }}</div>
<div class="description">
<span class="visits">浏览量{{ state.data.visits }}</span>
<span>{{ parseTime(state.data.created_at) }}</span>
</div>
</div>
<div class="html" v-html="state.data.content"></div>
</div>
</div>
<webFooter></webFooter>
</div>
</template>
<script setup>
import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue";
import webFooter from "@/components/webFooter/index.vue";
import request from '@/utils/request'
function detail (id) {
return request({
url: '/v1/service/solution_case/detail',
method: 'post',
data: { id }
})
}
const loading = ref(true);
const state = reactive({
data: {},
});
const route = useRoute();
watch(route, () => {
getData()
})
onMounted(() => {
getData()
});
function getData () {
let id = route.params.id;
if (!id) return
detail(id).then(res => {
if (200 == res.code) {
state.data = res.data;
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
</script>
<style lang="scss" scoped>
.bg {
background: rgba(242, 246, 255, 1);
min-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
.conter1400 {
flex: 1;
}
.head {
padding: 30px 0 20px 0;
span {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
}
.one {
color: #333333;
}
}
.content {
background: #fff;
margin-bottom: 40px;
.title,
.html {
padding: 30px 40px;
}
.title {
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
border-bottom: 1px solid #dcdcdc;
.description {
padding-top: 20px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
.visits {
display: inline-block;
width: 120px;
}
}
}
}
}
</style>
<style>
</style>

View File

@ -1,9 +1,297 @@
<template>
<router-view></router-view>
<div class="small" v-loading="loading">
<div class="_title">
<div v-if="!state.banner" style="height: 394px; background-color: #108de9"></div>
<div v-else style="height: 394px">
<img :src="state.banner" style="width: 100%;height: 100%;" alt="banner" />
</div>
<div v-if="state.caseList.length" class="_li" :class="isFixed ? '_fixed' : ''">
<ul class="conter1000">
<li
:class="activeId == item.id ? '_active' : ''"
v-for="(item, index) in state.caseList"
:key="item.id"
@click="setScrollTop(item.id, index)"
>{{ item.title }}</li>
</ul>
</div>
<h2 v-else style="text-align: center; line-height: 100px;">暂无数据</h2>
</div>
<div class="box" v-show="!isShowMore">
<div
class="_item"
:ref="setItemRef"
v-for="(item, index) in state.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 :src="item.image" alt srcset />
</div>
<div class="_l" :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'">
<h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">{{ item.title }}</h3>
<!-- <p>{{ item.description }}</p> -->
<p>{{ item.description }}</p>
</div>
<div class="_r" v-if="!isOddEvenNumber(index)">
<img :src="item.image" alt srcset />
</div>
</div>
<div class="_list conter1400">
<ul>
<li v-for="child in item.children" :key="item.id" @click="handlePath(item.id)">
<el-image style="width: 100%; height: 135px" :src="child.image" fit="cover"></el-image>
<div class="_head text_hidden">{{ child.title }}</div>
<div class="_detail text_hidden">{{ child.description }}</div>
</li>
</ul>
<div class="_liBtn text-right">
<el-button class="x_btns" @click="handleShowMore(item)">查看更多</el-button>
</div>
</div>
</div>
</div>
<seeMore
v-if="isShowMore"
v-model:isShowMore="isShowMore"
v-model:oneLevelTitle="oneLevelTitle"
></seeMore>
<webFooter></webFooter>
</div>
</template>
<script setup>
</script>
import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue";
import webFooter from "@/components/webFooter/index.vue";
import request from '@/utils/request'
import { banner } from "@/api/website/home/index";
const router = useRouter();
function handlePath (id) {
let routeData = router.resolve({ path: `/solution/detail/${id}/`});
window.open(routeData.href, '_blank');
}
function solution_case (mode) {
return request({
url: '/v1/service/solution_case',
method: 'post',
data: { mode }
})
}
const loading = ref(true);
const oneLevelTitle = ref({});
const modeDict = { 'small': 101, 'large': 102, 'government': 103, 'scientific': 104 };
const keyDict = { 'small': '解决方案>中小型企业', 'large': '解决方案>大型企业服务', 'government': '解决方案>政府区域服务', 'scientific': '解决方案>政府区域服务' };
const isShowMore = ref(false);
const activeId = ref("");
const itemRefs = [];
const setItemRef = (el) => {
if (el) {
itemRefs.push(el);
}
};
const state = reactive({
caseList: [],
banner: ''
});
const scrollTop = ref(0);
const isFixed = ref(false);
const route = useRoute();
watch(route, () => {
init0()
})
onMounted(() => {
init0()
});
function init0 () {
let name = route.params.name;
if(!name) return
let mode = modeDict[name];
let key = keyDict[name];
solution_case(mode).then(res => {
if (200 == res.code) {
state.caseList = res.data
init();
}
})
loading.value = true;
banner(key).then(res => {
if (200 == res.code) {
state.banner = res.data.images
loading.value = false;
}
}).catch(() => {
loading.value = false;
})
}
function init () {
if (state.caseList.length) {
activeId.value = state.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>
</style>
.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 {
margin-bottom: 30px;
._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;
img {
width: 100%;
height: 100%;
}
}
}
}
._list {
margin-top: 86px;
> ul {
display: flex;
li {
cursor: pointer;
width: calc(100% / 6);
padding: 0 11px;
&:hover ._head,
&:hover ._detail {
opacity: 0.6;
}
._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>