yujialong 1 year ago
parent 8b572d29cf
commit ad5d81c0b3
  1. 20
      src/pages/article/activity.vue
  2. 75
      src/pages/article/index.vue
  3. 621
      src/pages/careers/index.vue
  4. 8
      src/pages/column/index.vue
  5. 11
      src/pages/industrial/index.vue
  6. 63
      src/pages/newsPress/index.vue
  7. 144
      src/pages/overview/index.vue
  8. 5
      src/pages/publication/patent.vue
  9. 16
      src/pages/publication/thesis.vue
  10. 21
      src/pages/publish/show.vue
  11. 56
      src/pages/researchTeam/index.vue
  12. 22
      src/pages/talentCentre/index.vue
  13. 22
      src/pages/team/index.vue
  14. 18
      src/styles/page/publication.scss

@ -202,24 +202,4 @@ export default {
font-size: 18px;
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
}
@media (max-width: 1200px) {
.banner {
height: 15rem;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
}
</style>

@ -258,79 +258,4 @@ export default {
}
}
}
@media (max-width: 1420px) {
.content {
width: 98%;
}
}
@media (max-width: 1200px) {
.article {
/deep/.des {
img {
max-width: 100%;
height: 15rem;
}
}
}
.banner {
font-size: 1.5rem;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
.article {
.des {
img {
height: 15rem !important;
}
}
}
}
@media (max-width: 480px) {
.wrap {
.banner {
padding: 8rem 0 0 10rem;
height: 17rem;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.banner {
padding: 12rem 0 0 10rem;
height: 20rem;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.banner {
padding: 14rem 0 0 10rem;
height: 22rem;
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.banner {
padding: 16rem 0 0 10rem;
height: 26rem;
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.banner {
padding: 18rem 0 0 10rem;
height: 30rem;
}
}
}
</style>

@ -1,10 +1,15 @@
<template>
<div class="wrap">
<el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<el-carousel :interval="6000"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
<img :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -14,44 +19,68 @@
<div class="block">
<div class="inner">
<ul class="card">
<li class="wow fadeInDown" data-wow-delay="0.1s">
<img class="pic" :src="modules[1].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.1s">
<img class="pic"
:src="modules[1].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<p class="text">{{ modules[1].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.3s">
<img class="pic" :src="modules[2].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.3s">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<p class="text">{{ modules[2].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.5s">
<img class="pic" :src="modules[3].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.5s">
<img class="pic"
:src="modules[3].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<p class="text">{{ modules[3].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
</div>
</li>
<li class="wow fadeInDown" data-wow-delay="0.7s">
<img class="pic" :src="modules[4].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.7s">
<img class="pic"
:src="modules[4].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[4].form.title }}</h6>
<p class="text">{{ modules[4].form.des }}</p>
</div>
<div class="arrow">
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
<img src="@/assets/images/arrow-white.png"
alt=""
:class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
@click="openLink(modules[4].form)">
</div>
</li>
</ul>
@ -61,16 +90,26 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<ul class="people">
<template v-for="(item, i) in modules[6].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
<img class="comma" src="@/assets/images/comma.png" alt="">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
data-wow-delay="0.5s"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
@click="openLink(item)">
<img class="comma"
src="@/assets/images/comma.png"
alt="">
<div class="left">
<h6>{{ item.title }}</h6>
<div class="des">{{ item.des }}</div>
</div>
<img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
</li>
</template>
</ul>
@ -79,14 +118,23 @@
<ul class="shows">
<template v-for="(item, i) in modules[7].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
data-wow-delay="0.3s">
<div class="left">
<h6>{{ item.title }}</h6>
<div class="sub">{{ item.subTitle }}</div>
<div class="des">{{ item.des }}</div>
<img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
<img src="@/assets/images/arrow-white.png"
alt=""
class="icon"
:class="{'arrow': isLink(item.link.linkName)}"
@click="openLink(item)">
</div>
<img class="pic" :src="item.pic" alt="">
<img class="pic"
:src="item.pic"
alt="">
</li>
</template>
</ul>
@ -129,7 +177,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.wrap {
/deep/ .el-carousel {
height: 21.6rem;
@ -157,7 +205,6 @@ export default {
.intro {
margin-bottom: 6.9rem;
}
}
}
.card {
@ -201,9 +248,9 @@ export default {
width: 100%;
height: 7.9rem;
text-align: center;
background: #36404A;
background: #36404a;
opacity: 0;
transition: .3s;
transition: 0.3s;
cursor: default;
display: flex;
align-items: center;
@ -218,7 +265,7 @@ export default {
padding: 4.5rem 3.15rem 4.5rem 2.565rem;
margin-bottom: 100px;
background-color: #fff;
transition: .3s;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
@ -271,7 +318,10 @@ export default {
margin-bottom: 40px;
color: #fff;
&:hover .left {
h6, .sub, .des, .icon {
h6,
.sub,
.des,
.icon {
transform: translateY(20px);
}
}
@ -280,13 +330,13 @@ export default {
}
&:nth-child(2) {
.left {
background-color: rgba(47, 79, 23, .65);
background-color: rgba(47, 79, 23, 0.65);
}
}
&:nth-child(3) {
.left {
width: 43%;
background-color: rgba(91, 58, 35, .65);
background-color: rgba(91, 58, 35, 0.65);
}
}
}
@ -296,7 +346,7 @@ export default {
width: 43.333%;
height: 100%;
padding: 138px 30px 130px 103px;
background-color: rgba(54, 54, 54, .65);
background-color: rgba(54, 54, 54, 0.65);
}
.pic {
position: absolute;
@ -307,519 +357,20 @@ export default {
}
h6 {
font-size: 2.07rem;
transition: .3s;
transition: 0.3s;
}
.sub {
margin: 20px 0 20px 0;
font-size: 1.35rem;
transition: .3s;
transition: 0.3s;
}
.des {
margin-bottom: 40px;
font-size: 1.08rem;
transition: .3s;
}
.icon {
transition: .3s;
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap{
/deep/ .el-carousel {
height: 15rem;
.el-carousel__container{
height: 15rem;
}
img{
height: 15rem;
}
}
}
.block{
padding: 50px 0;
.inner {
width: 95%;margin: 0 auto;
.card{
flex-direction: column;
li{
margin-top: 20px;
width: 100%;
height: 27rem;
}
}
.people{
li {
padding: 200px 20px 30px;
.left {
width: 100%;
}
.pic{
top: -60px;
right: 13px;
width: 60%;
height: 12.5rem;
}
}
}
}
}
.shows{
li {
flex-direction: column;
align-items:flex-start;
height: 16rem;
.left {
padding: 10px ;
h6{
font-size: 1.5rem ;
}
.sub {
margin: .5rem;
font-size: 1rem;
}
.des{
margin-bottom: 1.25rem;
}
.icon {
width: 3.5rem;
height: 3.5rem;
}
}
}
}
}
@media (max-width: 320px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
transition: 0.3s;
}
.icon {
width: 2rem;height: 2rem;
}
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
}
.icon {
width: 2rem;height: 2rem;
}
}
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40px;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
h6 {
font-size: 1rem;
}
.sub {
font-size: .9rem;
}
.des {
font-size: .88rem;
margin-bottom: .5rem;
}
.icon {
width: 2rem;height: 2rem;
}
}
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 15rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -40%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 2rem 2rem;
}
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
padding: 10rem 1.25rem 1.5rem;
margin-bottom: 15rem;
.pic {
top: -60%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 3rem 2rem;
}
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 20rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -85%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 4rem 2rem;
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel{
height: 12rem !important;
}
/deep/ .el-carousel__container{
height: 12rem !important;
}
/deep/ .el-carousel__item {
height: 12rem !important;
}
}
.banner-item{
img {
height: 12rem !important;
}
.banner-name {
font-size: 1.5rem;
line-height: 1rem;
left: 2rem;
bottom: 2rem;
}
}
.block {
padding: 1.25rem 0;
.inner {
.card {
li {
flex: none;
height: 25rem;
.pic {
height: 25rem;
}
}
}
.people {
li {
margin-bottom: 30rem;
padding: 10rem 1.25rem 1.5rem;
.pic {
top: -115%;
height: auto;
}
}
}
}
}
.shows {
li {
height: auto;
.left {
padding: 4rem 2rem;
}
}
transition: 0.3s;
}
}
</style>

@ -126,7 +126,8 @@
:props="defaultProps"
node-key="id"
icon-class="el-icon-arrow-down"
@node-click="(item) => columnClick(item, 1)">
@node-click="(item) => columnClick(item, 1)"
@current-change="(item) => columnClick(item, 1)">
<span class="custom-tree-node"
slot-scope="{ node, data }"
style="padding-left: 10px;">
@ -367,7 +368,8 @@
class="type">
{{ item.classificationName }}
</p>
<h6 class="titleDes">{{ item.title }}</h6>
<h6 class="titleDes"
:title="item.title">{{ item.title }}</h6>
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
<span class="meta">{{ item.releaseTime }}</span>
<div class="des"
@ -746,6 +748,7 @@ export default {
},
//
columnClick (to, left) {
console.log("🚀 ~ file: index.vue:749 ~ columnClick ~ to, left:", to, left)
const { typeId } = to;
// /
if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
@ -1206,6 +1209,7 @@ export default {
margin-bottom: 0;
font-size: 1rem;
text-align: center;
-webkit-line-clamp: 1;
}
}
.news-notice {

@ -82,16 +82,16 @@
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title"
:class="{'wow fadeInUp': $store.getters.getModelType}"
v-html="modules[6].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="app">
<li v-for="(item, i) in modules[7].list"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
:class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}"
@click="openLink(item)">
<img class="bg"
:src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
@ -107,12 +107,13 @@
<div class="block news-block">
<div class="inner">
<h2 class="b-title wow fadeInUp"
<h2 class="b-title"
:class="{'wow fadeInUp': $store.getters.getModelType}"
v-html="modules[8].form.title"></h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<ul class="news">
<li class="wow fadeInDown"
<li :class="{'wow fadeInDown': $store.getters.getModelType}"
:data-wow-delay="(0.2 * i).toFixed(1) + 's'"
v-for="(item, i) in articles"
:key="i"

@ -190,67 +190,4 @@ export default {
height: 3.3rem;
}
}
@media (max-width: 1520px) {
.list {
li {
&:nth-child(even) {
.texts {
left: 25px;
}
}
}
.texts {
right: 25px;
width: 55%;
}
}
}
@media (min-width: 280px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 18rem;
.el-carousel__container {
height: 18rem;
}
img {
height: 18rem;
}
}
}
.banner-item .banner-name[data-v-1525064c] {
font-size: 1.5rem;
}
.inner {
width: 95%;
.list {
li {
margin-top: 20px;
.pic {
width: 100%;
height: 25rem !important;
}
.texts {
padding: 10px 5px 10px !important;
top: 30px;
height: auto;
h6 {
font-size: 1.5rem !important;
}
p {
font-size: 1rem;
margin: 5px 0 !important;
line-height: 1.5rem;
}
.sub {
margin: 10px 0;
}
.des {
margin-bottom: 10px;
}
}
}
}
}
}
</style>

@ -389,148 +389,4 @@ export default {
// height: 700px;
}
}
@media (min-width: 2000px) {
.scan {
.scan-inner {
justify-content: flex-start;
padding-left: 22%;
}
.left {
width: 37%;
}
.pic {
width: 800px;
}
}
}
@media (min-width: 2400px) {
.scan {
.scan-inner {
padding-left: 24%;
}
}
}
@media (min-width: 2500px) {
.scan {
.scan-inner {
padding-left: 26%;
}
}
}
@media (min-width: 2800px) {
.scan {
.scan-inner {
padding-left: 29%;
}
}
}
@media (min-width: 3500px) {
.scan {
.scan-inner {
padding-left: 35%;
}
.left {
width: 32%;
}
}
}
@media (min-width: 5000px) {
.scan {
.scan-inner {
padding-left: 39.5%;
}
.left {
width: 20%;
}
}
}
@media (min-width: 6000px) {
.scan {
.scan-inner {
padding-left: 42%;
}
}
}
@media (max-width: 1800px) {
.scan .scan-inner {
padding-left: 14%;
}
}
@media (max-width: 1500px) {
.scan .scan-inner {
padding-left: 10%;
}
}
@media (max-width: 1400px) {
.history {
.texts {
flex-direction: column;
}
.left {
width: 100%;
}
.bg {
width: auto;
max-width: 100%;
height: auto;
margin: 20px 0 0 0;
}
}
.scan {
.scan-inner {
flex-direction: column;
padding: 0 10%;
}
.left {
width: 100%;
}
.pic {
width: 100%;
height: auto;
margin-top: 2rem;
}
}
.fac {
.event {
.texts {
position: static;
margin-top: 20px;
}
}
}
}
@media (max-width: 920px) {
.core {
.texts {
top: 20px !important;
left: 20px !important;
right: 20px !important;
width: auto;
}
}
.scan {
padding: 20px;
}
.fac {
.l-card {
flex-direction: column;
li {
width: 100%;
margin-bottom: 1rem;
}
}
}
}
@media (max-width: 750px) {
.core {
.texts {
position: static;
padding: 20px;
color: #333;
}
.line {
background: #333;
}
}
}
</style>

@ -25,15 +25,10 @@
</el-date-picker>
</div>
<div class="search">
<el-tooltip class="item"
effect="dark"
:content="$t('column.pleaseEnterPatentOfficer')"
placement="top-start">
<input type="text"
:placeholder="$t('column.pleaseEnterPatentOfficer')"
v-model="form.patentQueryKeyWord"
clearable>
</el-tooltip>
</div>
</div>

@ -3,8 +3,7 @@
<div class="forms">
<div class="item">
<span class="label">{{$t('column.publicationyear')}}</span>
<el-date-picker
style="width: 300px"
<el-date-picker style="width: 300px"
v-model="form.publicationYear"
type="year"
:placeholder="$t('column.pleaseSelectThePublicationTime')"
@ -15,14 +14,17 @@
</el-date-picker>
</div>
<div class="search">
<el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
<input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
</el-tooltip>
<input type="text"
:placeholder="$t('column.PleaseEnterThePaperName')"
v-model="form.paperQueryKeyWord"
clearable>
</div>
</div>
<ul class="list">
<li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
<li v-for="(item, i) in articles"
:key="i"
@click="$parent.toArtice(item)">
<h6>{{ item.title }}</h6>
<p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
<p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
@ -89,7 +91,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "../../styles/page/publication.scss";
@import '../../styles/page/publication.scss';
.list {
li {
padding: 30px;

@ -51,27 +51,6 @@
<p class="name">DOI</p>
<p class="val">{{ form.doi }}</p>
</template>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news"
:key="i"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
</div>
</div>
</div>

@ -238,60 +238,4 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.left {
margin-bottom: 30px;
}
}
}
@media (max-width: 980px) {
.article {
.team-wrap {
display: flex;
align-items: flex-start;
}
.letter {
flex-direction: column;
margin: 16px 10px 0 0;
.item {
border: 1px solid #dbdbdb;
border-top: 0;
&:first-child {
border-top: 1px solid #dbdbdb;
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
}
}
.teams {
flex: 1;
}
}
}
@media (max-width: 640px) {
.article {
.left {
.search {
width: 50%;
}
}
.teams {
flex-direction: column;
li {
width: 100%;
}
}
}
}
</style>

@ -71,28 +71,6 @@
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.hot')}}</p>
<ul class="list">
<li v-for="(item, i) in hots"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
<p class="l-title">{{$t('column.latestNews')}}</p>
<ul class="list">
<li v-for="(item, i) in news"
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
</ul>
</div>
</div>
</div>

@ -124,26 +124,4 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
flex-direction: column;
.left,
.right {
width: 100%;
}
}
}
@media (max-width: 640px) {
.content {
.list {
li {
flex-direction: column;
}
.pic {
margin: 0 0 20px 0;
}
}
}
}
</style>

@ -19,7 +19,7 @@
height: 38px;
line-height: 38px;
border: 0;
background: #F7F7F7;
background: #f7f7f7;
}
.search {
display: inline-flex;
@ -30,7 +30,7 @@
padding: 0 15px;
font-size: 14px;
color: #333;
background: #F7F7F7;
background: #f7f7f7;
border: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
@ -45,20 +45,8 @@
align-items: center;
width: 62px;
height: 38px;
background: #1583FF;
background: #1583ff;
border-radius: 0px 6px 6px 0px;
cursor: pointer;
}
}
@media (max-width: 1200px) {
.forms {
padding: 1.25rem;
flex-direction: column;
.item, .search,div {
width: 80%;margin: 0 auto;
justify-content: center;
margin-top: 20px;
}
}
}
Loading…
Cancel
Save