williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

抽离列表弹窗为新窗口并去掉网站进来时的loading效果

Browse Source
This commit is contained in:
熊丽君
2021-08-10 11:00:58 +08:00
parent 3e922d69ce
commit 83bb450a22
5 changed files with 371 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
public/index.html
View File

@ -1,207 +1,207 @@
<!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,
body, body,
#app { #app {
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
100% { .chromeframe {
-webkit-transform: rotate(360deg); margin: 0.2em 0;
-ms-transform: rotate(360deg); background: #ccc;
transform: rotate(360deg); color: #000;
padding: 0.2em 0;
} }
}
@keyframes spin { #loader-wrapper {
0% { position: fixed;
-webkit-transform: rotate(0deg); top: 0;
-ms-transform: rotate(0deg); left: 0;
transform: rotate(0deg); width: 100%;
height: 100%;
z-index: 999999;
} }
100% {
-webkit-transform: rotate(360deg); #loader {
-ms-transform: rotate(360deg); display: block;
transform: rotate(360deg); position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
} }
}
#loader:before {
content: '';
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader-wrapper .loader-section { #loader:after {
position: fixed; content: '';
top: 0; position: absolute;
width: 51%; top: 15px;
height: 100%; left: 15px;
background: #7171C6; right: 15px;
z-index: 1000; bottom: 15px;
-webkit-transform: translateX(0); border-radius: 50%;
-ms-transform: translateX(0); border: 3px solid transparent;
transform: translateX(0); border-top-color: #fff;
} -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#loader-wrapper .loader-section.section-left { @-webkit-keyframes spin {
left: 0; 0% {
} -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section.section-right { @keyframes spin {
right: 0; 0% {
} -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.loaded #loader-wrapper .loader-section.section-left { #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); left: 0;
-ms-transform: translateX(-100%); }
transform: translateX(-100%);
-webkit-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.000);
}
.loaded #loader-wrapper .loader-section.section-right { #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); right: 0;
-ms-transform: translateX(100%); }
transform: translateX(100%);
-webkit-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.000);
}
.loaded #loader { .loaded #loader-wrapper .loader-section.section-left {
opacity: 0; -webkit-transform: translateX(-100%);
-webkit-transition: all 0.3s ease-out; -ms-transform: translateX(-100%);
transition: all 0.3s ease-out; transform: translateX(-100%);
} -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);
}
.loaded #loader-wrapper { .loaded #loader-wrapper .loader-section.section-right {
visibility: hidden; -webkit-transform: translateX(100%);
-webkit-transform: translateY(-100%); -ms-transform: translateX(100%);
-ms-transform: translateY(-100%); transform: translateX(100%);
transform: translateY(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transition: all 0.3s 1s ease-out; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s 1s ease-out; }
}
.no-js #loader-wrapper { .loaded #loader {
display: none; opacity: 0;
} -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.no-js h1 { .loaded #loader-wrapper {
color: #222222; visibility: hidden;
} -webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
#loader-wrapper .load_title { .no-js #loader-wrapper {
font-family: 'Open Sans'; display: none;
color: #FFF; }
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span { .no-js h1 {
font-weight: normal; color: #222222;
font-style: italic; }
font-size: 13px;
color: #FFF; #loader-wrapper .load_title {
opacity: 0.5; font-family: 'Open Sans';
} color: #fff;
</style> font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #fff;
opacity: 0.5;
}
</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>

5
src/router/index.js
View File

@ -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),

41
src/views/home/home.vue
View File

@ -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
View 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>

48
src/views/search.vue
View File

@ -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 }) => {