抽离列表弹窗为新窗口并去掉网站进来时的loading效果
This commit is contained in:
熊丽君
@ -1,11 +1,14 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
<meta
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
<title><%= webpackConfig.name %></title>
|
<title><%= webpackConfig.name %></title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
@ -41,7 +44,7 @@
|
|||||||
margin: -75px 0 0 -75px;
|
margin: -75px 0 0 -75px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
border-top-color: #FFF;
|
border-top-color: #fff;
|
||||||
-webkit-animation: spin 2s linear infinite;
|
-webkit-animation: spin 2s linear infinite;
|
||||||
-ms-animation: spin 2s linear infinite;
|
-ms-animation: spin 2s linear infinite;
|
||||||
-moz-animation: spin 2s linear infinite;
|
-moz-animation: spin 2s linear infinite;
|
||||||
@ -51,7 +54,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loader:before {
|
#loader:before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
@ -59,7 +62,7 @@
|
|||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
border-top-color: #FFF;
|
border-top-color: #fff;
|
||||||
-webkit-animation: spin 3s linear infinite;
|
-webkit-animation: spin 3s linear infinite;
|
||||||
-moz-animation: spin 3s linear infinite;
|
-moz-animation: spin 3s linear infinite;
|
||||||
-o-animation: spin 3s linear infinite;
|
-o-animation: spin 3s linear infinite;
|
||||||
@ -68,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loader:after {
|
#loader:after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
@ -76,7 +79,7 @@
|
|||||||
bottom: 15px;
|
bottom: 15px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
border-top-color: #FFF;
|
border-top-color: #fff;
|
||||||
-moz-animation: spin 1.5s linear infinite;
|
-moz-animation: spin 1.5s linear infinite;
|
||||||
-o-animation: spin 1.5s linear infinite;
|
-o-animation: spin 1.5s linear infinite;
|
||||||
-ms-animation: spin 1.5s linear infinite;
|
-ms-animation: spin 1.5s linear infinite;
|
||||||
@ -84,7 +87,6 @@
|
|||||||
animation: spin 1.5s linear infinite;
|
animation: spin 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@-webkit-keyframes spin {
|
@-webkit-keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
||||||
@ -111,13 +113,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#loader-wrapper .loader-section {
|
#loader-wrapper .loader-section {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 51%;
|
width: 51%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #7171C6;
|
background: #7171c6;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
-webkit-transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
-ms-transform: translateX(0);
|
-ms-transform: translateX(0);
|
||||||
@ -132,21 +133,20 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-left {
|
.loaded #loader-wrapper .loader-section.section-left {
|
||||||
-webkit-transform: translateX(-100%);
|
-webkit-transform: translateX(-100%);
|
||||||
-ms-transform: translateX(-100%);
|
-ms-transform: translateX(-100%);
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-right {
|
.loaded #loader-wrapper .loader-section.section-right {
|
||||||
-webkit-transform: translateX(100%);
|
-webkit-transform: translateX(100%);
|
||||||
-ms-transform: translateX(100%);
|
-ms-transform: translateX(100%);
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loaded #loader {
|
.loaded #loader {
|
||||||
@ -174,7 +174,7 @@
|
|||||||
|
|
||||||
#loader-wrapper .load_title {
|
#loader-wrapper .load_title {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -189,19 +189,19 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #FFF;
|
color: #fff;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="loader-wrapper">
|
<!-- <div id="loader-wrapper">
|
||||||
<div id="loader"></div>
|
<div id="loader"></div>
|
||||||
<div class="loader-section section-left"></div>
|
<div class="loader-section section-left"></div>
|
||||||
<div class="loader-section section-right"></div>
|
<div class="loader-section section-right"></div>
|
||||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -116,6 +116,11 @@ export const constantRoutes = [
|
|||||||
component: resolve => require(['@/views/search'], resolve),
|
component: resolve => require(['@/views/search'], resolve),
|
||||||
name: 'search'
|
name: 'search'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/result',
|
||||||
|
component: resolve => require(['@/views/result'], resolve),
|
||||||
|
name: 'result'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
component: resolve => require(['@/views/error/404'], resolve),
|
component: resolve => require(['@/views/error/404'], resolve),
|
||||||
|
|||||||
@ -38,9 +38,20 @@
|
|||||||
:key="item.id"
|
:key="item.id"
|
||||||
>
|
>
|
||||||
<span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
|
<span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
|
||||||
<span class="text_hidden_one text_18_333 pointer">{{
|
<!-- <span class="text_hidden_one text_18_333 pointer">{{
|
||||||
item.title
|
item.title
|
||||||
}}</span>
|
}}</span> -->
|
||||||
|
<span class="text_hidden_one text_18_333 pointer">
|
||||||
|
<router-link
|
||||||
|
target="_blank"
|
||||||
|
:to="{
|
||||||
|
path: '/result',
|
||||||
|
query: { key: 'policyRead', id: item.id }
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</router-link>
|
||||||
|
</span>
|
||||||
<i v-if="index < 3">
|
<i v-if="index < 3">
|
||||||
<img src="@/assets/image/new.png" alt="" />
|
<img src="@/assets/image/new.png" alt="" />
|
||||||
</i>
|
</i>
|
||||||
@ -68,7 +79,18 @@
|
|||||||
<el-tab-pane label="其他" name="1415157049267982336"></el-tab-pane>
|
<el-tab-pane label="其他" name="1415157049267982336"></el-tab-pane>
|
||||||
<div style="min-height:290px">
|
<div style="min-height:290px">
|
||||||
<div class="banner_r_list" v-for="item in list" :key="item.id">
|
<div class="banner_r_list" v-for="item in list" :key="item.id">
|
||||||
<div class="text_18_333 pointer">{{ item.title }}</div>
|
<!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
|
||||||
|
<div class="text_18_333 pointer">
|
||||||
|
<router-link
|
||||||
|
target="_blank"
|
||||||
|
:to="{
|
||||||
|
path: '/result',
|
||||||
|
query: { key: 'policy', id: item.id }
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
<span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
|
<span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -85,7 +107,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="tab_list">
|
<div class="tab_list">
|
||||||
<div class="banner_r_list" v-for="item in list3" :key="item.id">
|
<div class="banner_r_list" v-for="item in list3" :key="item.id">
|
||||||
<div class="text_18_333 pointer">{{ item.title }}</div>
|
<!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
|
||||||
|
<div class="text_18_333 pointer">
|
||||||
|
<router-link
|
||||||
|
target="_blank"
|
||||||
|
:to="{
|
||||||
|
path: '/result',
|
||||||
|
query: { key: 'information', id: item.id }
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
<span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
|
<span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
139
src/views/result.vue
Normal file
139
src/views/result.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 预览弹出层 -->
|
||||||
|
<div class="result_page content">
|
||||||
|
<h2>{{ formData.title }}</h2>
|
||||||
|
<div class="info" v-if="type != 'information'">
|
||||||
|
<span v-if="type != 'companyNeed' && type != 'scienceResult'"
|
||||||
|
>来源：{{ formData.source }}</span
|
||||||
|
>
|
||||||
|
<span v-if="type == 'companyNeed'">价格：{{ formData.price }}</span>
|
||||||
|
<el-image
|
||||||
|
v-if="type == 'scienceResult'"
|
||||||
|
style="width: 100px; height: 100px"
|
||||||
|
:src="formData.picList ? formData.picList[0] : ''"
|
||||||
|
fit="cover"
|
||||||
|
:preview-src-list="formData.picList"
|
||||||
|
></el-image>
|
||||||
|
<span
|
||||||
|
>发布：{{
|
||||||
|
formData.listDate || parseTime(formData.createTime, '{y}-{m}-{d}')
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
<span v-if="token && type == 'policy'">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
v-if="formData.collected == 0"
|
||||||
|
@click="addItem"
|
||||||
|
>
|
||||||
|
<i class="el-icon-star-on"></i><span>收藏</span>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="info"
|
||||||
|
size="mini"
|
||||||
|
v-if="formData.collected == 1"
|
||||||
|
@click="cancelItem"
|
||||||
|
>
|
||||||
|
<i class="el-icon-star-on"></i><span>取消收藏</span>
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div v-html="formData.text"></div> -->
|
||||||
|
<div id="text">
|
||||||
|
<editor v-model="formData.text" :min-height="192" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
search,
|
||||||
|
getPolicyInfo,
|
||||||
|
getPolicyReadInfo,
|
||||||
|
getInfo,
|
||||||
|
getInfo2,
|
||||||
|
getInfo3
|
||||||
|
} from '@/api/search';
|
||||||
|
import { mapGetters } from 'vuex';
|
||||||
|
import { add, cancel } from '@/api/search';
|
||||||
|
import Editor from '@/components/Editor';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Editor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
type: '',
|
||||||
|
formData: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['token'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addItem() {
|
||||||
|
add({ policyId: this.formData.id }).then(res => {
|
||||||
|
this.formData.collected = 1;
|
||||||
|
this.msgSuccess('操作成功');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancelItem() {
|
||||||
|
cancel({ policyId: this.formData.id }).then(res => {
|
||||||
|
this.formData.collected = 0;
|
||||||
|
this.msgSuccess('操作成功');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let { key, id } = this.$route.query;
|
||||||
|
this.type = key;
|
||||||
|
if (this.type == 'policy') {
|
||||||
|
// 政策
|
||||||
|
getPolicyInfo({ policyId: id }).then(({ data }) => {
|
||||||
|
this.formData = data;
|
||||||
|
});
|
||||||
|
} else if (this.type == 'policyRead') {
|
||||||
|
// 政策解读
|
||||||
|
getPolicyReadInfo({ readId: id }).then(({ data }) => {
|
||||||
|
this.formData = data;
|
||||||
|
});
|
||||||
|
} else if (this.type == 'information') {
|
||||||
|
// 资讯快报
|
||||||
|
getInfo({ id }).then(({ data }) => {
|
||||||
|
this.formData = data;
|
||||||
|
});
|
||||||
|
} else if (this.type == 'companyNeed') {
|
||||||
|
// 企业需求
|
||||||
|
getInfo2({ id }).then(({ data }) => {
|
||||||
|
this.formData = data;
|
||||||
|
});
|
||||||
|
} else if (this.type == 'scienceResult') {
|
||||||
|
// 科学成功
|
||||||
|
getInfo3({ id }).then(({ data }) => {
|
||||||
|
this.formData = data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/.el-dialog__body {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.result_page {
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
#text {
|
||||||
|
margin-top: 30px;
|
||||||
|
/deep/.ql-toolbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/deep/.editor {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -13,13 +13,24 @@
|
|||||||
<el-divider></el-divider>
|
<el-divider></el-divider>
|
||||||
<div class="item_i" v-for="(item, index2) in value" :key="index2">
|
<div class="item_i" v-for="(item, index2) in value" :key="index2">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="pointer" @click="handleItem(key, item.id)">
|
<h4 class="pointer">
|
||||||
{{ item.title }}
|
<router-link
|
||||||
|
target="_blank"
|
||||||
|
:to="{ path: '/result', query: { key, id: item.id } }"
|
||||||
|
>{{ item.title }}</router-link
|
||||||
|
>
|
||||||
</h4>
|
</h4>
|
||||||
<div class="info" v-if="key == 'policy' || key == 'policyRead'">
|
<div class="info" v-if="key == 'policy' || key == 'policyRead'">
|
||||||
<div>来源：{{ item.source }}</div>
|
<div>来源：{{ item.source }}</div>
|
||||||
<div>发布：{{ item.listDate }}</div>
|
<div>发布：{{ item.listDate }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="info"
|
||||||
|
style="justify-content: flex-end"
|
||||||
|
v-if="key == 'information'"
|
||||||
|
>
|
||||||
|
<div>发布：{{ parseTime(item.listDate, '{y}-{m}-{d}') }}</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="info"
|
class="info"
|
||||||
v-else-if="key == 'companyNeed' || key == 'scienceResult'"
|
v-else-if="key == 'companyNeed' || key == 'scienceResult'"
|
||||||
@ -83,38 +94,7 @@ export default {
|
|||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {},
|
||||||
handleItem(key, id) {
|
|
||||||
this.type = key;
|
|
||||||
this.dialogVisible = true;
|
|
||||||
if (key == 'policy') {
|
|
||||||
// 政策
|
|
||||||
getPolicyInfo({ policyId: id }).then(({ data }) => {
|
|
||||||
this.formData = data;
|
|
||||||
});
|
|
||||||
} else if (key == 'policyRead') {
|
|
||||||
// 政策解读
|
|
||||||
getPolicyReadInfo({ readId: id }).then(({ data }) => {
|
|
||||||
this.formData = data;
|
|
||||||
});
|
|
||||||
} else if (key == 'information') {
|
|
||||||
// 资讯快报
|
|
||||||
getInfo({ id }).then(({ data }) => {
|
|
||||||
this.formData = data;
|
|
||||||
});
|
|
||||||
} else if (key == 'companyNeed') {
|
|
||||||
// 企业需求
|
|
||||||
getInfo2({ id }).then(({ data }) => {
|
|
||||||
this.formData = data;
|
|
||||||
});
|
|
||||||
} else if (key == 'scienceResult') {
|
|
||||||
// 科学成功
|
|
||||||
getInfo3({ id }).then(({ data }) => {
|
|
||||||
this.formData = data;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
let { val: param } = this.$route.query;
|
let { val: param } = this.$route.query;
|
||||||
search({ param }).then(({ data }) => {
|
search({ param }).then(({ data }) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user