路由修改,文件移动

This commit is contained in:
熊丽君
2021-12-30 16:48:43 +08:00
parent bd085bbe8b
commit cab6a9cfa8
13 changed files with 537 additions and 34 deletions

View File

@ -191,3 +191,37 @@ aside {
.multiselect--active {
z-index: 1000 !important;
}
// 自定义全局样式
.conter1000 {
width: 1000px;
margin: 0 auto;
}
// 2行文本省略号
.text_hidden {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.x_btns {
font-size: 16px !important;
color: #fff !important;
border-radius: 0 !important;
background-color: #0054ff !important;
}
.x16{
font-size: 16px !important;
}
.x_fff{
color: #fff !important;
}
.x_blue{
color: #0054ff !important;
}
.x_border_blue{
border: 1px solid #0054ff !important;
}
.x_bg_blue{
background-color: #0054ff !important;
}

View File

@ -1,5 +1,5 @@
<template>
<div :class="{ 'hidden': hidden }" class="pagination-container">
<div :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
v-model:current-page="currentPage"
@ -15,86 +15,87 @@
</template>
<script setup>
import { scrollTo } from '@/utils/scroll-to'
import { scrollTo } from "@/utils/scroll-to";
const props = defineProps({
total: {
required: true,
type: Number
type: Number,
},
page: {
type: Number,
default: 1
default: 1,
},
limit: {
type: Number,
default: 20
default: 20,
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
return [10, 20, 30, 50];
},
},
// 移动端页码按钮的数量端默认值5
pagerCount: {
type: Number,
default: document.body.clientWidth < 992 ? 5 : 7
default: document.body.clientWidth < 992 ? 5 : 7,
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
default: "total, sizes, prev, pager, next, jumper",
},
background: {
type: Boolean,
default: true
default: true,
},
autoScroll: {
type: Boolean,
default: true
default: true,
},
hidden: {
type: Boolean,
default: false
}
})
default: false,
},
});
const emit = defineEmits();
const currentPage = computed({
get() {
return props.page
return props.page;
},
set(val) {
emit('update:page', val)
}
})
emit("update:page", val);
},
});
const pageSize = computed({
get() {
return props.limit
return props.limit;
},
set(val){
emit('update:limit', val)
}
})
set(val) {
emit("update:limit", val);
},
});
function handleSizeChange(val) {
emit('pagination', { page: currentPage.value, limit: val })
emit("pagination", { page: currentPage.value, limit: val });
if (props.autoScroll) {
scrollTo(0, 800)
scrollTo(0, 800);
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize.value })
emit("pagination", { page: val, limit: pageSize.value });
if (props.autoScroll) {
scrollTo(0, 800)
scrollTo(0, 800);
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
/* background: #fff; */
/* padding: 32px 16px; */
margin: 0;
height: 50px;
}
.pagination-container.hidden {
display: none;

View File

@ -137,7 +137,7 @@ dt {
}
.webHead {
position: absolute;
z-index: 1;
z-index: 2001;
top: 0;
left: 0;
width: 100%;
@ -157,7 +157,6 @@ dt {
.show_box {
display: none;
position: absolute;
z-index: 2001;
bottom: -170px;
width: 100%;
text-align: center;
@ -165,6 +164,8 @@ dt {
div {
height: 42px;
line-height: 42px;
font-size: 14px;
color: #666666;
background-color: #f2f6ff;
}
._active {

View File

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

View File

@ -0,0 +1,93 @@
<template>
<div class="about">
<div style="height: 394px; background-color: #ccc"></div>
<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"
>
{{ item }}
</div>
</div>
<div class="_r">
<!-- 公司简介---后期可能是接收富文本内容 -->
<h3>公司简介</h3>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
<el-image
src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
fit="fill"
></el-image>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
<p>
中国科学院重庆绿色智能技术研究院合肥分院以下简称合肥分院是在响应中科院号召支持合肥国家科学中心建设的前提下中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建2018年12月20日正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能精准医疗5G物联绿色环保等研究单元主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地主要从事绿色智能科技研发与科技成果转化合肥分院秉持重庆研究院市场为魂创新为本的理念按照院企共建源头创新科技共享产业集聚模式建设以服务好科技工作者服务好合作企业为宗旨开展形式多样的成果转移转化加快科研成果落地
</p>
</div>
</div>
</div>
</template>
<script setup>
const input3 = ref("");
const loading = ref(true);
const total = ref(1);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
});
/** 查询 */
function getList() {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 1000);
}
getList();
</script>
<style lang="scss" scoped>
.about {
background-color: #f2f6ff;
.box {
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>

View File

@ -0,0 +1,130 @@
<template>
<div class="activity">
<div style="height: 394px; background-color: #ccc"></div>
<div class="box conter1000">
<el-row :gutter="10">
<el-col :span="5">
<el-select
v-model="queryParams.value"
placeholder="活动分类"
></el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="queryParams.value2"
placeholder="活动状态"
></el-select>
</el-col>
<el-col :span="14">
<el-input v-model="queryParams.value3" placeholder="请输入关键词">
<template #append>
<el-button class="x_btns">搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<div v-loading="loading">
<div class="_item" v-for="(item, index) in 3" :key="index">
<div class="_l">
<el-image
style="width: 358px; height: 200px; vertical-align: middle"
src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
fit="fill"
></el-image>
</div>
<div class="_r">
<p class="text_hidden">
订单利润模型构建企业利润机器人智能感知与控制专场 |
合肥高新区科技成果供需对接活动
</p>
<div class="_time">
活动时间2021-10-14 13:30:00 ~ 2021-10-16 16:30:00
</div>
<div class="_info">
<span class="fl"><span class="x_blue">16</span> 人报名</span>
<el-button class="fr x_btns" v-if="index == 0" disabled
>已报名</el-button
>
<el-button
v-else-if="index == 1"
class="fr x16 x_blue x_border_blue"
style="border-radius: 0"
>报名</el-button
>
<el-button v-else class="fr x16" type="info" disabled
>已结束</el-button
>
</div>
</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</template>
<script setup>
const loading = ref(true);
const total = ref(1);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
value: "",
value2: "",
value3: "",
});
/** 查询 */
function getList() {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 1000);
}
getList();
</script>
<style lang="scss" scoped>
.activity {
background-color: #f2f6ff;
.box {
position: relative;
padding-top: 20px;
}
._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

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

View File

@ -0,0 +1,149 @@
<template>
<div class="innovate">
<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"
:key="item.id"
@click="handleActive(item.id)"
>
{{ item.title }}
</div>
</div>
<div class="_r">
<div style="width: 70%">
<el-input
v-model.trim="queryParams.input3"
placeholder="请输入关键词"
>
<template #append>
<el-button class="x_btns" @click="handleQuery">搜索</el-button>
</template>
</el-input>
</div>
<div class="_list" v-loading="loading">
<div class="item" v-for="item in 5" :key="item">
<div class="_info">
<p class="text_hidden">服务标题服务标题服务标题服务标题</p>
<div class="_tags">
<el-tag class="x_fff x_bg_blue">服务描述标签</el-tag>
</div>
</div>
<div class="_detail">查看详情</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</div>
</template>
<script setup>
const loading = ref(true);
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
input3: "",
});
const total = ref(1);
const kindId = ref(1);
const kindList = reactive([
{ id: 1, title: "情报服务" },
{ id: 2, title: "高技术服务" },
{ id: 3, title: "情报服务" },
]);
/** 查询 */
function getList() {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 1000);
}
function handleActive(id) {
kindId.value = id;
queryParams.pageNum = 1;
queryParams.input3 = "";
getList();
}
function handleQuery() {
queryParams.pageNum = 1;
getList();
}
getList();
</script>
<style lang="scss" scoped>
.innovate {
background-color: #f2f6ff;
.box {
padding-top: 30px;
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 {
position: relative;
flex: 1;
._list {
display: flex;
flex-wrap: wrap;
.item {
width: 31%;
margin-top: 14px;
margin-right: 14px;
background-color: #fff;
&:nth-child(-n + 3) {
margin-top: 10px;
}
._info {
padding: 30px 14px 0;
p {
margin: 0;
font-size: 16px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
._tags {
margin: 10px 0 0;
.el-tag {
font-size: 14px;
}
}
}
._detail {
height: 54px;
line-height: 54px;
margin-top: 30px;
text-align: center;
color: #333;
font-weight: bold;
font-size: 14px;
&:hover {
color: #fff;
background: #9bbcff;
}
}
}
}
}
}
}
</style>

View File

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

View File

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

View File

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

View File

@ -0,0 +1,9 @@
<template>
<router-view></router-view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

View File

@ -1,13 +1,12 @@
<template>
<div class="index">
<webHead></webHead>
<router-view class="content"/>
<router-view class="content" />
</div>
</template>
<script setup>
import webHead from "../components/webHead/index.vue";
</script>
<style lang="scss" scoped>