1
This commit is contained in:
wangchengming
parent
98ef795163
commit
2e7f07b688
BIN
public/static/img/about/aboutBanner.jpg
Normal file
BIN
public/static/img/about/aboutBanner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
|
@ -98,14 +98,14 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ title: '联系我们', path: '/cnkhp.com/CU' },
|
{ title: '联系我们', path: '/cnkhp.com/CU' },
|
||||||
{
|
// {
|
||||||
title: '客户登录',
|
// title: '客户登录',
|
||||||
jump: 'http://117.72.41.220:9097'
|
// jump: 'http://117.72.41.220:9097'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
title: '供应商登录',
|
// title: '供应商登录',
|
||||||
jump: 'http://117.72.41.220:9097'
|
// jump: 'http://117.72.41.220:9097'
|
||||||
}
|
// }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -149,7 +149,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 28rem 60rem;
|
padding: 28rem 70rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
height: 158rem;
|
height: 158rem;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
id="screen1"
|
id="screen1"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/static/img/about/aboutBanner.png"
|
src="/static/img/about/aboutBanner.jpg"
|
||||||
alt=""
|
alt=""
|
||||||
style="width: 100%;height: 100%;"
|
style="width: 100%;height: 100%;"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label="其他" >
|
<el-form-item label="其他">
|
||||||
<el-input v-model="form1.otherNotes" placeholder="请输入其他说明" />
|
<el-input v-model="form1.otherNotes" placeholder="请输入其他说明" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -231,11 +231,31 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-form-item label="附件">
|
<el-form-item label="附件">
|
||||||
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList2">
|
<div class="upload-file">
|
||||||
<el-button size="small" type="primary">
|
<el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload1" :file-list="fileList1" :limit="limit" :on-error="handleUploadError1" :on-exceed="handleExceed1" :on-success="handleUploadSuccess1" :show-file-list="false" class="upload-file-uploader" ref="fileUpload1">
|
||||||
上传
|
<!-- 上传按钮 -->
|
||||||
</el-button>
|
<el-button size="small" type="primary">上传</el-button>
|
||||||
</el-upload>
|
<!-- 上传提示 -->
|
||||||
|
<div class="el-upload__tip" slot="tip" v-if="isShowTip">
|
||||||
|
请上传
|
||||||
|
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
||||||
|
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
||||||
|
的文件
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<!-- 文件列表 -->
|
||||||
|
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||||
|
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList1">
|
||||||
|
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
||||||
|
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||||
|
</el-link>
|
||||||
|
<div class="ele-upload-list__item-content-action">
|
||||||
|
<el-link :underline="false" @click="handleDelete1(index)" type="danger">删除</el-link>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
||||||
|
|
@ -455,8 +475,10 @@
|
||||||
number: 0,
|
number: 0,
|
||||||
uploadList: [],
|
uploadList: [],
|
||||||
// 上传文件服务器地址
|
// 上传文件服务器地址
|
||||||
uploadFileUrl: process.env.VUE_APP_API_TARGET_URL + '/system/oss/upload',
|
uploadFileUrl:
|
||||||
|
process.env.VUE_APP_API_TARGET_URL + 'system/oss/addFilesUpload',
|
||||||
fileList: [],
|
fileList: [],
|
||||||
|
fileList1: [],
|
||||||
loadingModal: undefined
|
loadingModal: undefined
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -501,6 +523,9 @@
|
||||||
this.$refs['Partnerform'].validate(valid => {
|
this.$refs['Partnerform'].validate(valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.form1.fieldType = this.form1.fieldType.toString();
|
this.form1.fieldType = this.form1.fieldType.toString();
|
||||||
|
this.form1.imageurl = this.fileList
|
||||||
|
.map(item => item.url)
|
||||||
|
.toString();
|
||||||
this.$request
|
this.$request
|
||||||
.post('/official/companymessage/add', this.form1)
|
.post('/official/companymessage/add', this.form1)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
|
@ -512,10 +537,11 @@
|
||||||
phoneNumber: '',
|
phoneNumber: '',
|
||||||
email: '',
|
email: '',
|
||||||
fieldType: [],
|
fieldType: [],
|
||||||
otherNotes: '',
|
|
||||||
advantageConcept: '',
|
advantageConcept: '',
|
||||||
cooperationIntention: ''
|
cooperationIntention: '',
|
||||||
|
imageurl: ''
|
||||||
};
|
};
|
||||||
|
this.fileList = [];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -532,6 +558,9 @@
|
||||||
this.form.productCertification = this.form.productCertification.toString();
|
this.form.productCertification = this.form.productCertification.toString();
|
||||||
this.form.qualitySystem = this.form.qualitySystem.toString();
|
this.form.qualitySystem = this.form.qualitySystem.toString();
|
||||||
this.form.relevantQualifications = this.form.relevantQualifications.toString();
|
this.form.relevantQualifications = this.form.relevantQualifications.toString();
|
||||||
|
this.form.imageurl = this.fileList1
|
||||||
|
.map(item => item.url)
|
||||||
|
.toString();
|
||||||
this.$request
|
this.$request
|
||||||
.post('/official/companymessage/add', this.form)
|
.post('/official/companymessage/add', this.form)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
|
@ -554,8 +583,10 @@
|
||||||
qualitySystem: [],
|
qualitySystem: [],
|
||||||
relevantQualifications: [],
|
relevantQualifications: [],
|
||||||
advantageConcept: '',
|
advantageConcept: '',
|
||||||
cooperationIntention: ''
|
cooperationIntention: '',
|
||||||
|
imageurl: ''
|
||||||
};
|
};
|
||||||
|
this.fileList1 = [];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -599,7 +630,7 @@
|
||||||
},
|
},
|
||||||
// 上传失败
|
// 上传失败
|
||||||
handleUploadError(err) {
|
handleUploadError(err) {
|
||||||
this.$message.error(`上传文件失败，请重试`);
|
this.$message.error(`上传文件失败，请重试`, err);
|
||||||
this.loadingModal.close();
|
this.loadingModal.close();
|
||||||
},
|
},
|
||||||
// 上传成功回调
|
// 上传成功回调
|
||||||
|
|
@ -621,8 +652,8 @@
|
||||||
},
|
},
|
||||||
// 删除文件
|
// 删除文件
|
||||||
handleDelete(index) {
|
handleDelete(index) {
|
||||||
let ossId = this.fileList[index].ossId;
|
// let ossId = this.fileList[index].ossId;
|
||||||
delOss(ossId);
|
// delOss(ossId);
|
||||||
this.fileList.splice(index, 1);
|
this.fileList.splice(index, 1);
|
||||||
},
|
},
|
||||||
// 上传结束处理
|
// 上传结束处理
|
||||||
|
|
@ -642,6 +673,76 @@
|
||||||
} else {
|
} else {
|
||||||
return name;
|
return name;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 上传前校检格式和大小
|
||||||
|
handleBeforeUpload1(file) {
|
||||||
|
// 校检文件类型
|
||||||
|
if (this.fileType) {
|
||||||
|
const fileName = file.name.split('.');
|
||||||
|
const fileExt = fileName[fileName.length - 1];
|
||||||
|
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
||||||
|
if (!isTypeOk) {
|
||||||
|
this.$message.error(
|
||||||
|
`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 校检文件大小
|
||||||
|
if (this.fileSize) {
|
||||||
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
||||||
|
if (!isLt) {
|
||||||
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.loadingModal = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '正在上传文件，请稍候...',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
});
|
||||||
|
this.number++;
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
// 文件个数超出
|
||||||
|
handleExceed1() {
|
||||||
|
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
||||||
|
},
|
||||||
|
// 上传失败
|
||||||
|
handleUploadError1(err) {
|
||||||
|
this.$message.error(`上传文件失败，请重试`, err);
|
||||||
|
this.loadingModal.close();
|
||||||
|
},
|
||||||
|
// 上传成功回调
|
||||||
|
handleUploadSuccess1(res, file) {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.uploadList1.push({
|
||||||
|
name: res.data.fileName,
|
||||||
|
url: res.data.url,
|
||||||
|
ossId: res.data.ossId
|
||||||
|
});
|
||||||
|
this.uploadedSuccessfully1();
|
||||||
|
} else {
|
||||||
|
this.number--;
|
||||||
|
this.loadingModal.close();
|
||||||
|
this.$message.error(res.msg);
|
||||||
|
this.$refs.fileUpload1.handleRemove(file);
|
||||||
|
this.uploadedSuccessfully1();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除文件
|
||||||
|
handleDelete1(index) {
|
||||||
|
this.fileList1.splice(index, 1);
|
||||||
|
},
|
||||||
|
// 上传结束处理
|
||||||
|
uploadedSuccessfully1() {
|
||||||
|
if (this.number > 0 && this.uploadList1.length === this.number) {
|
||||||
|
this.fileList1 = this.fileList1.concat(this.uploadList1);
|
||||||
|
this.uploadList1 = [];
|
||||||
|
this.number = 0;
|
||||||
|
this.loadingModal.close();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,48 +2,23 @@
|
||||||
<div class="page-company">
|
<div class="page-company">
|
||||||
<div style="height:104rem;"></div>
|
<div style="height:104rem;"></div>
|
||||||
<div class="screen1">
|
<div class="screen1">
|
||||||
<img
|
<img :src="screen1.imageurl" alt="" style="width: 100%" />
|
||||||
:src="screen1.imageurl"
|
|
||||||
alt=""
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="screen2">
|
<div class="screen2">
|
||||||
<div class="wrapper1680">
|
<div class="wrapper1680">
|
||||||
<el-tabs
|
<el-tabs tab-position="left" v-model="activeName" @tab-click="handleChosePane">
|
||||||
tab-position="left"
|
<el-tab-pane label="投资者新闻" name="first">
|
||||||
v-model="activeName"
|
|
||||||
@tab-click="handleChosePane"
|
|
||||||
>
|
|
||||||
<el-tab-pane
|
|
||||||
label="投资者新闻"
|
|
||||||
name="first"
|
|
||||||
>
|
|
||||||
<div class="news-wrapper">
|
<div class="news-wrapper">
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="item in investorNews.actionOne" :key="item.id" @click="() => $router.push('/investor/detail/' + item.id)">
|
||||||
v-for="item in investorNews.actionOne"
|
|
||||||
:key="item.id"
|
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
<el-row class="itemRow">
|
<el-row class="itemRow">
|
||||||
<el-col
|
<el-col :span="8" class="imgCol">
|
||||||
:span="8"
|
|
||||||
class="imgCol"
|
|
||||||
>
|
|
||||||
<div class="list-img">
|
<div class="list-img">
|
||||||
<img
|
<img :src="item.cover" style="width:100%;height:100%;object-fit:cover;" alt="">
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col
|
<el-col :span="16" class="listContent">
|
||||||
:span="16"
|
|
||||||
class="listContent"
|
|
||||||
>
|
|
||||||
<div class="list-title">
|
<div class="list-title">
|
||||||
{{ item.captionName }}<span class="deailTitle">[详细]</span>
|
{{ item.captionName }}<span class="deailTitle">[详细]</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,12 +30,7 @@
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<div class="contentTitle">
|
<div class="contentTitle">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="item in investorNews.actionTwo" :key="item.id" class="itemDisc" @click="() => $router.push('/investor/detail/' + item.id)">
|
||||||
v-for="item in investorNews.actionTwo"
|
|
||||||
:key="item.id"
|
|
||||||
class="itemDisc"
|
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
{{ item.captionName }}
|
{{ item.captionName }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -69,19 +39,10 @@
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<div class="contentThree">
|
<div class="contentThree">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="(item, index) in investorNews.actionThree" :key="item.id" class="itemNomal" @click="() => $router.push('/investor/detail/' + item.id)">
|
||||||
v-for="(item, index) in investorNews.actionThree"
|
|
||||||
:key="item.id"
|
|
||||||
class="itemNomal"
|
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
<template v-if="index == 0">
|
<template v-if="index == 0">
|
||||||
<div class="imgList">
|
<div class="imgList">
|
||||||
<img
|
<img :src="item.cover" style="width:100%;height:100%;object-fit:cover;" alt="">
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
<div class="imgMask">
|
<div class="imgMask">
|
||||||
{{ item.captionName }}
|
{{ item.captionName }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,53 +57,27 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane
|
<el-tab-pane label="公司治理" name="second">
|
||||||
label="公司治理"
|
|
||||||
name="second"
|
|
||||||
>
|
|
||||||
<div class="news-wrapper">
|
<div class="news-wrapper">
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="(item, index) in corporateGovernance.actionOne" :key="item.id">
|
||||||
v-for="item in corporateGovernance.actionOne"
|
<div class="contentTitle" v-if="index == 0" @click="handleView(item.cover)">
|
||||||
:key="item.id"
|
{{ item.captionName }}<span class="deailTitle">[详细]</span>
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
</div>
|
||||||
>
|
<div class="contentTitle" v-else>
|
||||||
<el-row class="itemRow">
|
<a :href="item.cover" :download="getFileName(item.cover)"> {{ item.captionName }}<span class="deailTitle">[下载]</span></a>
|
||||||
<el-col
|
</div>
|
||||||
:span="8"
|
|
||||||
class="imgCol"
|
|
||||||
>
|
|
||||||
<div class="list-img">
|
|
||||||
<img
|
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col
|
|
||||||
:span="16"
|
|
||||||
class="listContent"
|
|
||||||
>
|
|
||||||
<div class="list-title">
|
|
||||||
{{ item.captionName }}<span class="deailTitle">[详细]</span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<div class="contentTitle">
|
<div class="contentTitle">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="item in corporateGovernance.actionTwo" :key="item.id">
|
||||||
v-for="item in corporateGovernance.actionTwo"
|
<div class="contentTitle">
|
||||||
:key="item.id"
|
<a :href="item.cover" :download="getFileName(item.cover)"> {{ item.captionName }}<span class="deailTitle">[下载]</span></a>
|
||||||
class="itemDisc"
|
</div>
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
{{ item.captionName }}
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -150,233 +85,221 @@
|
||||||
<div class="news-item">
|
<div class="news-item">
|
||||||
<div class="contentThree">
|
<div class="contentThree">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li v-for="item in corporateGovernance.actionThree" :key="item.id">
|
||||||
v-for="(item, index) in corporateGovernance.actionThree"
|
<div class="contentTitle">
|
||||||
:key="item.id"
|
<a :href="item.cover" :download="getFileName(item.cover)"> {{ item.captionName }}<span class="deailTitle">[下载]</span></a>
|
||||||
class="itemNomal"
|
</div>
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
<template v-if="index == 0">
|
|
||||||
<div class="imgList">
|
|
||||||
<img
|
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
<div class="imgMask">
|
|
||||||
{{ item.captionName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
{{ item.captionName }}
|
|
||||||
</template>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane
|
<el-tab-pane label="投资者关系" name="third">
|
||||||
label="投资者关系"
|
<el-form ref="feekform" :model="form" :rules="formRules" label-width="110rem" style="margin-top: 40rem">
|
||||||
name="third"
|
<div class="formBarContent">
|
||||||
>
|
<el-row>
|
||||||
<div class="news-wrapper">
|
<el-col :span="12">
|
||||||
<div class="news-item">
|
<el-form-item label="联系人" prop="userName">
|
||||||
<ul>
|
<el-input v-model="form.userName" />
|
||||||
<li
|
</el-form-item>
|
||||||
v-for="item in investorRelations.actionOne"
|
</el-col>
|
||||||
:key="item.id"
|
<el-col :span="12">
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
<el-form-item label="联系方式" prop="phoneNumber">
|
||||||
>
|
<el-input v-model="form.phoneNumber" />
|
||||||
<el-row class="itemRow">
|
</el-form-item>
|
||||||
<el-col
|
</el-col>
|
||||||
:span="8"
|
</el-row>
|
||||||
class="imgCol"
|
<el-form-item label="留言内容" prop="abstracts">
|
||||||
>
|
<el-input v-model="form.abstracts" :autosize="{ minRows: 6, maxRows: 6 }" type="textarea" />
|
||||||
<div class="list-img">
|
</el-form-item>
|
||||||
<img
|
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col
|
|
||||||
:span="16"
|
|
||||||
class="listContent"
|
|
||||||
>
|
|
||||||
<div class="list-title">
|
|
||||||
{{ item.captionName }}<span class="deailTitle">[详细]</span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="news-item">
|
<el-form-item style="text-align: center;">
|
||||||
<div class="contentTitle">
|
<el-button class="subBtn" @click="handleAdd">
|
||||||
<ul>
|
提交
|
||||||
<li
|
</el-button>
|
||||||
v-for="item in investorRelations.actionTwo"
|
</el-form-item>
|
||||||
:key="item.id"
|
</el-form>
|
||||||
class="itemDisc"
|
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
{{ item.captionName }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="news-item">
|
|
||||||
<div class="contentThree">
|
|
||||||
<ul>
|
|
||||||
<li
|
|
||||||
v-for="(item, index) in investorRelations.actionThree"
|
|
||||||
:key="item.id"
|
|
||||||
class="itemNomal"
|
|
||||||
@click="() => $router.push('/investor/detail/' + item.id)"
|
|
||||||
>
|
|
||||||
<template v-if="index == 0">
|
|
||||||
<div class="imgList">
|
|
||||||
<img
|
|
||||||
:src="item.cover"
|
|
||||||
style="width:100%;height:100%;object-fit:cover;"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
<div class="imgMask">
|
|
||||||
{{ item.captionName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
{{ item.captionName }}
|
|
||||||
</template>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-dialog :visible.sync="dialogVisible">
|
||||||
|
<img width="100%" :src="dialogImageUrl" alt="">
|
||||||
|
</el-dialog>
|
||||||
<FootBar theme="dark"></FootBar>
|
<FootBar theme="dark"></FootBar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapMutations, mapState } from 'vuex';
|
import { mapMutations, mapState } from 'vuex';
|
||||||
import FootBar from '@/components/FootBar.vue';
|
import FootBar from '@/components/FootBar.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
FootBar,
|
FootBar
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
screen1: {
|
screen1: {
|
||||||
imageurl: '',
|
imageurl: '',
|
||||||
introduction: {
|
introduction: {
|
||||||
businessName: '',
|
businessName: '',
|
||||||
businessNameEnglish: '',
|
businessNameEnglish: '',
|
||||||
titleChinese: '',
|
titleChinese: ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
dialogVisible: false,
|
||||||
|
dialogImageUrl: '',
|
||||||
|
activeName: 'first',
|
||||||
|
investorNews: {
|
||||||
|
actionOne: [],
|
||||||
|
actionTwo: [],
|
||||||
|
actionThree: []
|
||||||
|
},
|
||||||
|
corporateGovernance: {
|
||||||
|
actionOne: [],
|
||||||
|
actionTwo: [],
|
||||||
|
actionThree: []
|
||||||
|
},
|
||||||
|
investorRelations: {
|
||||||
|
actionOne: [],
|
||||||
|
actionTwo: [],
|
||||||
|
actionThree: []
|
||||||
|
},
|
||||||
|
tempImg: '/static/img/tempNews.png',
|
||||||
|
form: {
|
||||||
|
userName: '',
|
||||||
|
phoneNumber: '',
|
||||||
|
abstracts: ''
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
userName: [
|
||||||
|
{ required: true, message: '请输入联系人', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
phoneNumber: [
|
||||||
|
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
||||||
|
{
|
||||||
|
validator: function(rule, value, callback) {
|
||||||
|
const reg = /^1[3456789]\d{9}$/;
|
||||||
|
const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
||||||
|
if (!(reg.test(value) || reg3.test(value))) {
|
||||||
|
callback(new Error('请输入手机号、座机号或邮箱'));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
abstracts: [{ required: true, message: '请输入内容', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
scrollTop: state => state.scroll.scrollTop
|
||||||
|
})
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$event.$emit('nav-theme', 'light');
|
||||||
|
this.getScreen1Banner();
|
||||||
|
this.getInvestorNewsData();
|
||||||
|
this.getCorporateGovernanceData();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.$route.hash) {
|
||||||
|
this.forceScroll({
|
||||||
|
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||||
|
async getScreen1Banner() {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get('/official/index/list', {
|
||||||
|
params: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1,
|
||||||
|
captionName: '投资与合作/投资者/banner'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.screen1.imageurl = res.rows[0].imageurl;
|
||||||
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
activeName: 'first',
|
handleChosePane(tab, event) {
|
||||||
investorNews: {
|
this.activeName = tab.name;
|
||||||
actionOne: [],
|
|
||||||
actionTwo: [],
|
|
||||||
actionThree: [],
|
|
||||||
},
|
},
|
||||||
corporateGovernance: {
|
// 获取投资者新闻
|
||||||
actionOne: [],
|
async getInvestorNewsData() {
|
||||||
actionTwo: [],
|
try {
|
||||||
actionThree: [],
|
const res = await this.$request.get('/official/slideshow/list', {
|
||||||
|
params: { pageNum: 1, pageSize: 22, type: '4' }
|
||||||
|
});
|
||||||
|
this.investorNews.actionOne = res.rows.slice(0, 4);
|
||||||
|
this.investorNews.actionTwo = res.rows.slice(4, 18);
|
||||||
|
this.investorNews.actionThree = res.rows.slice(18, 22);
|
||||||
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
investorRelations: {
|
// 获取公司治理新闻
|
||||||
actionOne: [],
|
async getCorporateGovernanceData() {
|
||||||
actionTwo: [],
|
try {
|
||||||
actionThree: [],
|
const res = await this.$request.get('/official/slideshow/list', {
|
||||||
|
params: { pageNum: 1, pageSize: 42, type: '5' }
|
||||||
|
});
|
||||||
|
var sortDate = res.rows.sort((a, b) => a.orderBy - b.orderBy);
|
||||||
|
this.corporateGovernance.actionOne = sortDate.slice(0, 14);
|
||||||
|
this.corporateGovernance.actionTwo = sortDate.slice(14, 28);
|
||||||
|
this.corporateGovernance.actionThree = sortDate.slice(28, 42);
|
||||||
|
} catch (error) {}
|
||||||
},
|
},
|
||||||
tempImg: '/static/img/tempNews.png',
|
handleView(imgUrl) {
|
||||||
};
|
console.log('$$$$', imgUrl);
|
||||||
},
|
this.dialogImageUrl = imgUrl;
|
||||||
computed: {
|
this.dialogVisible = true;
|
||||||
...mapState({
|
},
|
||||||
scrollTop: state => state.scroll.scrollTop,
|
// 获取文件名称
|
||||||
}),
|
getFileName(name) {
|
||||||
},
|
// 如果是url那么取最后的名字 如果不是直接返回
|
||||||
created () {
|
if (name.lastIndexOf('/') > -1) {
|
||||||
this.$event.$emit('nav-theme', 'light');
|
return name.slice(name.lastIndexOf('/') + 1);
|
||||||
this.getScreen1Banner();
|
} else {
|
||||||
this.getInvestorNewsData();
|
return name;
|
||||||
this.getCorporateGovernanceData();
|
}
|
||||||
this.getInvestorRelationsData();
|
},
|
||||||
},
|
handleAdd() {
|
||||||
mounted () {
|
try {
|
||||||
if (this.$route.hash) {
|
this.$refs['feekform'].validate(valid => {
|
||||||
this.forceScroll({
|
if (valid) {
|
||||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
this.$request.post('/official/message/add', this.form).then(res => {
|
||||||
behavior: 'smooth',
|
if (res.code == 200) {
|
||||||
});
|
this.form = {
|
||||||
|
userName: '',
|
||||||
|
phoneNumber: '',
|
||||||
|
abstracts: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
methods: {
|
|
||||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
|
||||||
async getScreen1Banner () {
|
|
||||||
try {
|
|
||||||
const res = await this.$request.get(
|
|
||||||
'/official/index/list',
|
|
||||||
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/投资者/banner' } },
|
|
||||||
);
|
|
||||||
this.screen1.imageurl = res.rows[0].imageurl;
|
|
||||||
} catch (error) {}
|
|
||||||
},
|
|
||||||
handleChosePane (tab, event) {
|
|
||||||
this.activeName = tab.name;
|
|
||||||
},
|
|
||||||
// 获取投资者新闻
|
|
||||||
async getInvestorNewsData () {
|
|
||||||
try {
|
|
||||||
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '4' } });
|
|
||||||
this.investorNews.actionOne = res.rows.slice(0, 4);
|
|
||||||
this.investorNews.actionTwo = res.rows.slice(4, 18);
|
|
||||||
this.investorNews.actionThree = res.rows.slice(18, 22);
|
|
||||||
} catch (error) {}
|
|
||||||
},
|
|
||||||
// 获取公司治理新闻
|
|
||||||
async getCorporateGovernanceData () {
|
|
||||||
try {
|
|
||||||
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '5' } });
|
|
||||||
this.corporateGovernance.actionOne = res.rows.slice(0, 4);
|
|
||||||
this.corporateGovernance.actionTwo = res.rows.slice(4, 18);
|
|
||||||
this.corporateGovernance.actionThree = res.rows.slice(18, 22);
|
|
||||||
} catch (error) {}
|
|
||||||
},
|
|
||||||
// 获取投资者关系新闻
|
|
||||||
async getInvestorRelationsData () {
|
|
||||||
try {
|
|
||||||
const res = await this.$request.get('/official/slideshow/list', { params: { pageNum: 1, pageSize: 22, type: '6' } });
|
|
||||||
this.investorRelations.actionOne = res.rows.slice(0, 4);
|
|
||||||
this.investorRelations.actionTwo = res.rows.slice(4, 18);
|
|
||||||
this.investorRelations.actionThree = res.rows.slice(18, 22);
|
|
||||||
} catch (error) {}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-company {
|
.page-company {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.screen2 {
|
.screen2 {
|
||||||
padding: 90rem 120rem 60rem;
|
padding: 90rem 120rem 60rem;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs__item {
|
/deep/.el-tabs__item {
|
||||||
padding: 0rem;
|
padding: 0rem;
|
||||||
height: 56rem;
|
height: 56rem;
|
||||||
margin-bottom: 62rem;
|
margin-bottom: 62rem;
|
||||||
|
|
@ -392,143 +315,204 @@ export default {
|
||||||
text-align: justifyLeft;
|
text-align: justifyLeft;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs__nav-wrap::after {
|
/deep/.el-tabs__nav-wrap::after {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs__active-bar {
|
/deep/.el-tabs__active-bar {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs__item.is-active {
|
/deep/.el-tabs__item.is-active {
|
||||||
font-family: MicrosoftYaHeiSemibold;
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
font-size: 28rem;
|
font-size: 28rem;
|
||||||
color: #111111;
|
color: #111111;
|
||||||
line-height: 64rem;
|
line-height: 64rem;
|
||||||
text-align: justifyLeft;
|
text-align: justifyLeft;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
border-bottom: 2rem solid #F0D145;;
|
border-bottom: 2rem solid #f0d145;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs--left .el-tabs__item.is-left {
|
/deep/.el-tabs--left .el-tabs__item.is-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
/deep/.el-tabs--left .el-tabs__header.is-left {
|
/deep/.el-tabs--left .el-tabs__header.is-left {
|
||||||
margin-right: 120rem;
|
margin-right: 120rem;
|
||||||
}
|
}
|
||||||
.news-wrapper {
|
.el-form-item {
|
||||||
display: flex;
|
margin-bottom: 22rem !important;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
}
|
/deep/.el-form-item__error {
|
||||||
.news-item {
|
font-size: 12rem;
|
||||||
width: 432rem;
|
padding-top: 4rem;
|
||||||
/* background-color: #864e4e; */
|
}
|
||||||
overflow: hidden;
|
/deep/.el-form-item__label {
|
||||||
cursor: pointer;
|
font-size: 14rem;
|
||||||
position: relative;
|
line-height: 40rem;
|
||||||
z-index: 1;
|
padding: 0 12rem 0 0;
|
||||||
}
|
}
|
||||||
.news-item:not(:nth-of-type(3n)) {
|
/deep/.el-form-item__content {
|
||||||
margin-right: calc((1416rem - 436rem * 3) / 2);
|
line-height: 40rem;
|
||||||
}
|
font-size: 14rem;
|
||||||
.news-item:hover {
|
}
|
||||||
z-index: 10;
|
/deep/.el-input {
|
||||||
}
|
font-size: 14rem;
|
||||||
.itemRow {
|
}
|
||||||
margin-bottom: 30rem;
|
/deep/.el-input__inner {
|
||||||
}
|
border-radius: 4rem;
|
||||||
.imgCol {
|
border: 1rem solid #dcdfe6;
|
||||||
width: 162rem;
|
height: 40rem;
|
||||||
height: 122rem;
|
line-height: 40rem;
|
||||||
padding: 0rem;
|
padding: 0 15rem;
|
||||||
}
|
}
|
||||||
.list-img {
|
/deep/.el-checkbox {
|
||||||
width: 162rem;
|
font-size: 14rem;
|
||||||
height: 122rem;
|
margin-right: 30rem;
|
||||||
}
|
}
|
||||||
.list-img img {
|
/deep/.el-checkbox__inner {
|
||||||
border-radius: 10rem;
|
border: 1rem solid #dcdfe6;
|
||||||
}
|
border-radius: 2rem;
|
||||||
.listContent {
|
width: 14rem;
|
||||||
width: calc(100% - 162rem);
|
height: 14rem;
|
||||||
padding: 13rem 15rem;
|
}
|
||||||
}
|
/deep/.el-checkbox__label {
|
||||||
.list-title{
|
padding-left: 10rem;
|
||||||
font-family: MicrosoftYaHei;
|
line-height: 19rem;
|
||||||
font-size: 16rem;
|
font-size: 14rem;
|
||||||
color: #777777;
|
}
|
||||||
line-height: 30rem;
|
/deep/.el-textarea {
|
||||||
text-align: justifyLeft;
|
font-size: 14rem;
|
||||||
font-style: normal;
|
}
|
||||||
text-transform: none;
|
/deep/.el-textarea__inner {
|
||||||
}
|
padding: 5rem 15rem;
|
||||||
.deailTitle {
|
border: 1rem solid #dcdfe6;
|
||||||
font-family: MicrosoftYaHei;
|
border-radius: 4rem;
|
||||||
font-size: 16rem;
|
height: 138rem !important;
|
||||||
color: #0045A2;
|
min-height: 138rem !important;
|
||||||
line-height: 30rem;
|
}
|
||||||
text-align: justifyLeft;
|
/deep/.el-upload-list__item {
|
||||||
font-style: normal;
|
font-size: 14rem;
|
||||||
text-transform: none;
|
margin-top: 5rem;
|
||||||
}
|
border-radius: 4rem;
|
||||||
.itemDisc {
|
}
|
||||||
list-style-type: disc;
|
/deep/.el-button--small {
|
||||||
list-style-position:inside;
|
padding: 9rem 15rem;
|
||||||
text-overflow: ellipsis;
|
font-size: 12rem;
|
||||||
overflow: hidden;
|
border-radius: 3rem;
|
||||||
word-break: break-all;
|
}
|
||||||
white-space: nowrap;
|
.news-wrapper {
|
||||||
}
|
display: flex;
|
||||||
.itemDisc::marker{
|
flex-wrap: wrap;
|
||||||
color: #F0D145;
|
}
|
||||||
}
|
.news-item {
|
||||||
.contentTitle{
|
width: 432rem;
|
||||||
font-family: MicrosoftYaHei;
|
/* background-color: #864e4e; */
|
||||||
font-size: 18rem;
|
overflow: hidden;
|
||||||
color: #333333;
|
cursor: pointer;
|
||||||
line-height: 40rem;
|
position: relative;
|
||||||
text-align: justifyLeft;
|
z-index: 1;
|
||||||
font-style: normal;
|
}
|
||||||
text-transform: none;
|
.news-item:not(:nth-of-type(3n)) {
|
||||||
}
|
margin-right: calc((1416rem - 436rem * 3) / 2);
|
||||||
.contentThree {
|
}
|
||||||
font-family: MicrosoftYaHei;
|
.news-item:hover {
|
||||||
font-size: 16rem;
|
z-index: 10;
|
||||||
color: #777777;
|
}
|
||||||
line-height: 30rem;
|
.itemRow {
|
||||||
text-align: justifyLeft;
|
margin-bottom: 30rem;
|
||||||
font-style: normal;
|
}
|
||||||
text-transform: none;
|
.imgCol {
|
||||||
}
|
width: 162rem;
|
||||||
.itemNomal {
|
height: 122rem;
|
||||||
margin-bottom: 30rem;
|
padding: 0rem;
|
||||||
}
|
}
|
||||||
.imgList {
|
.list-img {
|
||||||
width: 432rem;
|
width: 162rem;
|
||||||
height: 246rem;
|
height: 122rem;
|
||||||
position: relative;
|
}
|
||||||
}
|
.list-img img {
|
||||||
.imgMask{
|
border-radius: 10rem;
|
||||||
position: absolute;
|
}
|
||||||
bottom: 0rem;
|
.listContent {
|
||||||
width: 370rem;
|
width: calc(100% - 162rem);
|
||||||
height: 46rem;
|
padding: 13rem 15rem;
|
||||||
background: #000000;
|
}
|
||||||
border-radius: 0rem 0rem 10rem 10rem;
|
.list-title {
|
||||||
opacity: 0.7;
|
font-family: MicrosoftYaHei;
|
||||||
font-family: MicrosoftYaHei;
|
font-size: 16rem;
|
||||||
font-size: 20rem;
|
color: #777777;
|
||||||
color: #FFFFFF;
|
line-height: 30rem;
|
||||||
line-height: 40rem;
|
text-align: justifyLeft;
|
||||||
text-align: center;
|
font-style: normal;
|
||||||
font-style: normal;
|
text-transform: none;
|
||||||
text-transform: none;
|
}
|
||||||
text-overflow: ellipsis;
|
.deailTitle {
|
||||||
overflow: hidden;
|
font-family: MicrosoftYaHei;
|
||||||
word-break: break-all;
|
font-size: 16rem;
|
||||||
white-space: nowrap;
|
color: #0045a2;
|
||||||
padding: 0 30rem;
|
line-height: 30rem;
|
||||||
}
|
text-align: justifyLeft;
|
||||||
.imgList img {
|
font-style: normal;
|
||||||
border-radius: 10rem;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
.itemDisc {
|
||||||
|
list-style-type: disc;
|
||||||
|
list-style-position: inside;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.itemDisc::marker {
|
||||||
|
color: #f0d145;
|
||||||
|
}
|
||||||
|
.contentTitle {
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 18rem;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.contentThree {
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 16rem;
|
||||||
|
color: #777777;
|
||||||
|
line-height: 30rem;
|
||||||
|
text-align: justifyLeft;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.itemNomal {
|
||||||
|
margin-bottom: 30rem;
|
||||||
|
}
|
||||||
|
.imgList {
|
||||||
|
width: 432rem;
|
||||||
|
height: 246rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.imgMask {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rem;
|
||||||
|
width: 370rem;
|
||||||
|
height: 46rem;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 0rem 0rem 10rem 10rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 20rem;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 40rem;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 30rem;
|
||||||
|
}
|
||||||
|
.imgList img {
|
||||||
|
border-radius: 10rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,7 @@
|
||||||
<div class="page-news-detail">
|
<div class="page-news-detail">
|
||||||
<div style="height:104rem;"></div>
|
<div style="height:104rem;"></div>
|
||||||
<div class="screen1">
|
<div class="screen1">
|
||||||
<img
|
<img :src="screen1.bannerUrl" alt="" style="width:100%;" />
|
||||||
:src="screen1.bannerUrl"
|
|
||||||
alt=""
|
|
||||||
style="width:100%;"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="screen2">
|
<div class="screen2">
|
||||||
<div class="wrapper1400">
|
<div class="wrapper1400">
|
||||||
|
|
@ -17,10 +13,7 @@
|
||||||
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
|
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
|
||||||
<span>{{ newsDetail.groupName }}</span>
|
<span>{{ newsDetail.groupName }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="news-content ql-editor" v-html="newsDetail.newsContent">
|
||||||
class="news-content ql-editor"
|
|
||||||
v-html="newsDetail.newsContent"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,197 +55,208 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
screen1: {
|
screen1: {
|
||||||
bannerUrl: '',
|
bannerUrl: ''
|
||||||
},
|
},
|
||||||
currentNewsId: '',
|
currentNewsId: '',
|
||||||
prevNewsId: '',
|
prevNewsId: '',
|
||||||
nextNewsId: '',
|
nextNewsId: '',
|
||||||
newsDetail: {
|
newsDetail: {
|
||||||
releaseTime: '',
|
releaseTime: ''
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
currentId () {
|
|
||||||
return this.$route.params.newsId;
|
|
||||||
},
|
},
|
||||||
recommendData () {
|
computed: {
|
||||||
return [].concat(
|
currentId() {
|
||||||
this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
|
return this.$route.params.newsId;
|
||||||
[this.newsDetail],
|
|
||||||
this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
currentId: {
|
|
||||||
handler (v) {
|
|
||||||
document.getElementById('app').scrollTop = 0;
|
|
||||||
this.getNewsDetail(v);
|
|
||||||
},
|
},
|
||||||
immediate: true,
|
recommendData() {
|
||||||
},
|
return [].concat(
|
||||||
},
|
this.newsDetail.slideshowMap?.previous
|
||||||
created () {
|
? [this.newsDetail.slideshowMap.previous]
|
||||||
this.$event.$emit('nav-theme', 'light');
|
: [],
|
||||||
this.getScreen1Banner();
|
[this.newsDetail],
|
||||||
},
|
this.newsDetail.slideshowMap?.nextArticle
|
||||||
methods: {
|
? [this.newsDetail.slideshowMap.nextArticle]
|
||||||
async getScreen1Banner () {
|
: []
|
||||||
try {
|
|
||||||
const res = await this.$request.get(
|
|
||||||
'/official/index/list',
|
|
||||||
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/投资者/详情banner' } },
|
|
||||||
);
|
);
|
||||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
}
|
||||||
} catch (error) {}
|
|
||||||
},
|
},
|
||||||
async getNewsDetail (currentNewsId) {
|
watch: {
|
||||||
try {
|
currentId: {
|
||||||
const res = await this.$request.get('/official/slideshow/' + currentNewsId);
|
handler(v) {
|
||||||
this.newsDetail = res.data;
|
document.getElementById('app').scrollTop = 0;
|
||||||
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
|
this.getNewsDetail(v);
|
||||||
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
|
},
|
||||||
} catch (error) {}
|
immediate: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
created() {
|
||||||
};
|
this.$event.$emit('nav-theme', 'light');
|
||||||
|
this.getScreen1Banner();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getScreen1Banner() {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get('/official/index/list', {
|
||||||
|
params: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1,
|
||||||
|
captionName: '投资与合作//详情banner'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||||
|
} catch (error) {}
|
||||||
|
},
|
||||||
|
async getNewsDetail(currentNewsId) {
|
||||||
|
try {
|
||||||
|
const res = await this.$request.get(
|
||||||
|
'/official/slideshow/' + currentNewsId
|
||||||
|
);
|
||||||
|
this.newsDetail = res.data;
|
||||||
|
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
|
||||||
|
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page-news-detail{
|
.page-news-detail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
.screen1 {
|
.screen1 {
|
||||||
min-height: 600rem;
|
min-height: 600rem;
|
||||||
}
|
}
|
||||||
.screen2 {
|
.screen2 {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding-top: 135rem;
|
padding-top: 135rem;
|
||||||
padding-bottom: 90rem;
|
padding-bottom: 90rem;
|
||||||
}
|
}
|
||||||
.screen2 .news-title {
|
.screen2 .news-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 30rem;
|
font-size: 30rem;
|
||||||
color: #111111;
|
color: #111111;
|
||||||
line-height: 36rem;
|
line-height: 36rem;
|
||||||
}
|
}
|
||||||
.screen2 .news-info {
|
.screen2 .news-info {
|
||||||
height: 58rem;
|
height: 58rem;
|
||||||
padding-top: 50rem;
|
padding-top: 50rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1rem solid #999999;
|
border-bottom: 1rem solid #999999;
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16rem;
|
font-size: 16rem;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
line-height: 36rem;
|
line-height: 36rem;
|
||||||
}
|
}
|
||||||
.screen2 .news-content {
|
.screen2 .news-content {
|
||||||
font-family: MicrosoftYaHeiLight;
|
font-family: MicrosoftYaHeiLight;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 18rem;
|
font-size: 18rem;
|
||||||
color: #111111;
|
color: #111111;
|
||||||
line-height: 36rem;
|
line-height: 36rem;
|
||||||
margin-top: 30rem;
|
margin-top: 30rem;
|
||||||
}
|
}
|
||||||
.screen2 .news-content >>> p {
|
.screen2 .news-content >>> p {
|
||||||
margin-bottom: 10rem;
|
margin-bottom: 10rem;
|
||||||
}
|
}
|
||||||
.screen3 {
|
.screen3 {
|
||||||
height: auto;
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10rem;
|
padding: 10rem;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
.screen3 .title {
|
.screen3 .title {
|
||||||
font-family: MicrosoftYaHei;
|
font-family: MicrosoftYaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 24rem;
|
font-size: 24rem;
|
||||||
line-height: 88rem;
|
line-height: 88rem;
|
||||||
color: #141414;
|
color: #141414;
|
||||||
}
|
}
|
||||||
.screen3 .news-wrapper {
|
.screen3 .news-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.screen3 .news-item {
|
.screen3 .news-item {
|
||||||
width: 430rem;
|
width: 430rem;
|
||||||
height: 505rem;
|
height: 505rem;
|
||||||
border-radius: 10rem;
|
border-radius: 10rem;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem,
|
||||||
overflow: hidden;
|
rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||||
margin-bottom: 60rem;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
margin-bottom: 60rem;
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
z-index: 1;
|
position: relative;
|
||||||
}
|
z-index: 1;
|
||||||
.screen3 .news-item:not(:nth-of-type(3n)) {
|
}
|
||||||
margin-right: calc((1400rem - 430rem * 3) / 2);
|
.screen3 .news-item:not(:nth-of-type(3n)) {
|
||||||
}
|
margin-right: calc((1400rem - 430rem * 3) / 2);
|
||||||
.screen3 .news-item:hover {
|
}
|
||||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
.screen3 .news-item:hover {
|
||||||
z-index: 10;
|
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem,
|
||||||
}
|
rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||||
.screen3 .news-cover {
|
z-index: 10;
|
||||||
width: 510rem;
|
}
|
||||||
height: 302rem;
|
.screen3 .news-cover {
|
||||||
overflow: hidden;
|
width: 510rem;
|
||||||
}
|
height: 302rem;
|
||||||
.screen3 .news-cover img {
|
overflow: hidden;
|
||||||
transition: transform 0.4s;
|
}
|
||||||
width: 100%;
|
.screen3 .news-cover img {
|
||||||
}
|
transition: transform 0.4s;
|
||||||
.screen3 .news-cover:hover img {
|
width: 100%;
|
||||||
transform: scale(1.1, 1.1);
|
}
|
||||||
}
|
.screen3 .news-cover:hover img {
|
||||||
.screen3 .news-info {
|
transform: scale(1.1, 1.1);
|
||||||
padding: 55rem 35rem 0;
|
}
|
||||||
}
|
.screen3 .news-info {
|
||||||
.screen3 .news-info .title {
|
padding: 55rem 35rem 0;
|
||||||
font-family: MicrosoftYaHei;
|
}
|
||||||
font-weight: 400;
|
.screen3 .news-info .title {
|
||||||
font-size: 16rem;
|
font-family: MicrosoftYaHei;
|
||||||
line-height: 16rem;
|
font-weight: 400;
|
||||||
color: #000000;
|
font-size: 16rem;
|
||||||
white-space: nowrap;
|
line-height: 16rem;
|
||||||
overflow: hidden;
|
color: #000000;
|
||||||
text-overflow: ellipsis;
|
white-space: nowrap;
|
||||||
margin-bottom: 16rem;
|
overflow: hidden;
|
||||||
}
|
text-overflow: ellipsis;
|
||||||
.screen3 .news-info .abstracts {
|
margin-bottom: 16rem;
|
||||||
font-family: MicrosoftYaHei;
|
}
|
||||||
font-weight: 400;
|
.screen3 .news-info .abstracts {
|
||||||
font-size: 12rem;
|
font-family: MicrosoftYaHei;
|
||||||
line-height: 14rem;
|
font-weight: 400;
|
||||||
color: #666666;
|
font-size: 12rem;
|
||||||
margin-bottom: 20rem;
|
line-height: 14rem;
|
||||||
}
|
color: #666666;
|
||||||
.screen3 .news-info .date {
|
margin-bottom: 20rem;
|
||||||
font-family: MicrosoftYaHeiLight;
|
}
|
||||||
font-weight: 400;
|
.screen3 .news-info .date {
|
||||||
font-size: 12rem;
|
font-family: MicrosoftYaHeiLight;
|
||||||
line-height: 12rem;
|
font-weight: 400;
|
||||||
color: #666666;
|
font-size: 12rem;
|
||||||
}
|
line-height: 12rem;
|
||||||
.ql-editor {
|
color: #666666;
|
||||||
padding-left: 0;
|
}
|
||||||
padding-right: 0;
|
.ql-editor {
|
||||||
}
|
padding-left: 0;
|
||||||
.news-content >>> .ql-align-center {
|
padding-right: 0;
|
||||||
width: 100%;
|
}
|
||||||
}
|
.news-content >>> .ql-align-center {
|
||||||
.news-content >>> .ql-align-center img {
|
width: 100%;
|
||||||
width: 100%!important;
|
}
|
||||||
}
|
.news-content >>> .ql-align-center img {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user