generated from nuxt/nuxt_site
feat 添加列表页
This commit is contained in:
Abbh1
parent
95ca80296e
commit
30525332ad
@ -70,7 +70,7 @@
|
||||
|
||||
.Final-left-info-item {
|
||||
display: flex;
|
||||
margin: 10px 0;
|
||||
margin: 10px;
|
||||
|
||||
.Final-left-info-item-icon {
|
||||
margin-right: 10px;
|
||||
|
||||
@ -91,7 +91,34 @@ a {
|
||||
min-width: 190px;
|
||||
|
||||
.HeaderNav-navItems-child-items {
|
||||
word-break: keep-all;
|
||||
position: relative;
|
||||
|
||||
& a {
|
||||
width: 100%;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&>a {
|
||||
transition: .2s;
|
||||
color: #ade8dd !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.HeaderNav-navItems-child-box-child-box {
|
||||
box-shadow: 1px 1px 10px 0px #efefef;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
z-index: 9999999999999999;
|
||||
min-width: 190px;
|
||||
left: 185px;
|
||||
top: 0px;
|
||||
|
||||
.HeaderNav-navItems-child-items {
|
||||
// padding: 10px ;
|
||||
word-break: keep-all;
|
||||
|
||||
&:hover {
|
||||
@ -101,8 +128,9 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.messageUs .eMailIco {
|
||||
background: url("/img/emailIco.png") 16px center no-repeat #A72027;
|
||||
background: url("/img/emailIco.png") 16px center no-repeat #82e7d4;
|
||||
background-size: 21px auto;
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.messageUsForm .btn {
|
||||
background: #A72027;
|
||||
background: #82e7d4;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
188
assets/css/business/list/index.scss
Normal file
188
assets/css/business/list/index.scss
Normal file
@ -0,0 +1,188 @@
|
||||
// 分类
|
||||
.category-big-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
margin: 25px 0;
|
||||
background-color: #F9F9F9;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.category-left-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-weight: 800;
|
||||
color: #666C72;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.category-right-box {
|
||||
// position: absolute;
|
||||
// left: 90px;
|
||||
// top: 1px;
|
||||
padding-left: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.category-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px dashed #EFEFEF;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.category-right-item {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.category-right-item-active {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border-radius: 50px;
|
||||
background-color: #3F3F3F;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.sort {
|
||||
color: #646464 !important;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 列表盒子
|
||||
.jump {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.content-list-box {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
float: left;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.075);
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: all .3s ease 0s;
|
||||
margin-bottom: 40px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-box:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.content-img-box {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.content-img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.content-box-content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.content-box-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content-rate-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.content-rate-icon-box {
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
color: #8FA0B7;
|
||||
}
|
||||
|
||||
.content-rate-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.content-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #F7F7F7;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.content-user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content-user-img-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-user-name {
|
||||
width: 120px;
|
||||
margin-left: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.content-user-send-time {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
.page-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -1,6 +1,10 @@
|
||||
/*1440px*/
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {}
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1560px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*小于*/
|
||||
@media screen and (min-width: 1440px) {}
|
||||
@ -25,9 +29,10 @@
|
||||
|
||||
/*小于*/
|
||||
@media screen and (max-width: 480px) {
|
||||
.Turn-the-page-box{
|
||||
.Turn-the-page-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.return {
|
||||
display: none;
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
/*大于*/
|
||||
@media screen and (min-width: 1440px) {
|
||||
.container {
|
||||
max-width: 1420px;
|
||||
max-width: 1560px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,131 +0,0 @@
|
||||
// 新闻类型
|
||||
.news-titile-pos-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 50px 0;
|
||||
|
||||
.news-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.news-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.news-title:hover {
|
||||
color: #f08519;
|
||||
}
|
||||
|
||||
.news-title-active {
|
||||
color: #f08519;
|
||||
}
|
||||
|
||||
.news-title-line {
|
||||
width: 1px;
|
||||
height: 36px;
|
||||
background-color: #999999;
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 新闻内容盒子
|
||||
.news-contianer {
|
||||
margin: 0px auto;
|
||||
height: 300px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 35px;
|
||||
transition: .4s;
|
||||
cursor: pointer;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.news-contianer:hover {
|
||||
box-shadow: 0 0 15px 1px #e5e4e4;
|
||||
}
|
||||
|
||||
.news-content-box {
|
||||
height: 65%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-cover-box {
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
object-fit: cover;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.news-content-right-box {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
.news-time {
|
||||
font-size: 14px;
|
||||
color: rgb(153, 153, 153);
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.news-intro {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 24px;
|
||||
color: rgb(102, 102, 102);
|
||||
width: 100%;
|
||||
text-align: justify;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
// ted栏
|
||||
.Top_navigation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// 分页
|
||||
.page-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.page {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-content-sublevel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.jump {
|
||||
text-decoration: dashed;
|
||||
color: black;
|
||||
}
|
||||
@ -3,6 +3,14 @@
|
||||
// background-color: black;
|
||||
}
|
||||
|
||||
section{
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.index-bg{
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
margin: 0 0 45px;
|
||||
@ -169,10 +177,13 @@ h2:after {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
// 按钮
|
||||
.btn-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
|
||||
@ -24,12 +24,12 @@
|
||||
<img src="/img/icon/logo.png" class="icon-img" alt="">
|
||||
<div class="Final-left-title font">{{ $t('common.footer.desc') }}</div>
|
||||
<div class="Final-left-info font">
|
||||
<div class="Final-left-info-item">
|
||||
<!-- <div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img.png" alt="">
|
||||
</div>
|
||||
<div>{{ $t('common.footer.loc') }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="Final-left-info-item">
|
||||
<div class="Final-left-info-item-icon">
|
||||
<img src="/img/icon/Final_left_img3.png" alt="">
|
||||
|
||||
@ -12,12 +12,11 @@
|
||||
<template #title>
|
||||
<div class="HeaderNav-navItems">{{ item.name }}</div>
|
||||
</template>
|
||||
<el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name"
|
||||
class="HeaderNav-navItems">
|
||||
<el-menu-item v-for="(_item, _index) in item.children" :key="_item.name" :index="_item.name" class="HeaderNav-navItems">
|
||||
{{ _item.name }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu> -->
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu> -->
|
||||
|
||||
|
||||
|
||||
@ -25,25 +24,30 @@
|
||||
:class="currentRoute.indexOf(item.alias) != -1 ? 'HeaderNav-navItems nav-active' : 'HeaderNav-navItems'"
|
||||
v-for="item in props.navList" v-cloak :key="item.name">
|
||||
<span v-if="item.children.length === 0" class="font">{{ item.name }}</span>
|
||||
<span v-else @mouseenter.self="enterNavEnter" class="font" >{{ item.name }}</span>
|
||||
<div class="HeaderNav-navItems-child-box dNone" @mouseleave.capture="enterNavLeave"
|
||||
v-if="item.children.length >= 1">
|
||||
<span v-else @mouseenter.self="enterNavEnter($event, 'HeaderNav-navItems-child-box')" class="font">{{ item.name
|
||||
}}</span>
|
||||
<div class="HeaderNav-navItems-child-box dNone"
|
||||
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box')" v-if="item.children.length >= 1">
|
||||
<div v-for="_item in item.children" class="HeaderNav-navItems-child-items">
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="font" @mouseenter="enterNavEnter">
|
||||
{{ _item.name }}
|
||||
<!-- <div v-if="_item.children">
|
||||
<div v-if="_item.children.length >= 1" @mouseenter="enterNavEnter"> ></div>
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="font"
|
||||
@mouseenter="enterNavEnter($event, 'HeaderNav-navItems-child-box-child-box', true)">
|
||||
{{ _item.name + (_item.children?.length >= 1 ? ' >' : '') }}
|
||||
|
||||
<div class="HeaderNav-navItems-child-box dNone" style="margin-left: 210px;margin-top: 20px;"@mouseleave.capture="enterNavLeave">
|
||||
<nuxt-link :to="getHerf(_item['href'])" class="font " @mouseenter="enterNavEnter">
|
||||
{{ _item.name }}
|
||||
<div v-if="_item.children">
|
||||
<div v-if="_item.children.length >= 1"> ></div>
|
||||
</div>
|
||||
|
||||
</nuxt-link>
|
||||
<!-- 第二层 -->
|
||||
<template v-if="_item.children">
|
||||
|
||||
<div class="HeaderNav-navItems-child-box-child-box dNone"
|
||||
@mouseleave.self="enterNavLeave($event, 'HeaderNav-navItems-child-box-child-box')">
|
||||
<div v-for="_itemchild in _item.children" class="HeaderNav-navItems-child-items">
|
||||
<nuxt-link :to="getHerf(_itemchild['href'])" class="font ">
|
||||
{{ _itemchild.name }}
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div> -->
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
@ -67,18 +71,22 @@ const currentRoute = route.currentRoute.value.matched[0]['name']
|
||||
|
||||
//事件
|
||||
let navTimer = null
|
||||
const enterNavEnter = e => {
|
||||
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
|
||||
const enterNavEnter = (e, cn, fade) => {
|
||||
|
||||
;[...document.getElementsByClassName(cn)].map(item => item.classList.add('dNone'))
|
||||
|
||||
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
|
||||
ele &&
|
||||
ele.classList.remove('dNone')
|
||||
clearInterval(navTimer)
|
||||
navTimer = setTimeout(() => {
|
||||
!fade && (navTimer = setTimeout(() => {
|
||||
ele &&
|
||||
ele.classList.add('dNone')
|
||||
}, 1000)
|
||||
}, 1000))
|
||||
}
|
||||
const enterNavLeave = e => {
|
||||
let ele = e.target.parentElement.getElementsByClassName('HeaderNav-navItems-child-box')[0]
|
||||
const enterNavLeave = (e, cn) => {
|
||||
console.log(cn, 123);
|
||||
let ele = e.target.parentElement.getElementsByClassName(cn)[0]
|
||||
ele &&
|
||||
ele.classList.add('dNone')
|
||||
}
|
||||
|
||||
@ -80,8 +80,8 @@ let navList = ref([
|
||||
{
|
||||
name: "模型",
|
||||
children: [],
|
||||
href: '/about',
|
||||
alias: 'about'
|
||||
href: '/model/1-1',
|
||||
alias: 'model'
|
||||
},
|
||||
{
|
||||
name: "动画",
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<div class="Poster-container" :style="posterStyle">
|
||||
<img class="Poster-img" :src="posterInfo.imgSrc" alt="">
|
||||
<div class="Poster-content-box">
|
||||
<div class="Poster-title">{{ props.title }}</div>
|
||||
<div class="Poster-text">{{ props.text }}</div>
|
||||
<div class="Poster-title">{{ posterInfo.title }}</div>
|
||||
<div class="Poster-text">{{ posterInfo.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,24 +23,24 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const initState = {
|
||||
imgSrc: '/img/product_list/banner2.jpg',
|
||||
imgSrc: '',
|
||||
title: '',
|
||||
text: ''
|
||||
}
|
||||
let posterInfo = ref({ ...initState })
|
||||
let posterStyle = {
|
||||
height: '23vw',
|
||||
height: '8vw',
|
||||
}
|
||||
|
||||
// 获取海报
|
||||
// useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
|
||||
// const data = JSON.parse(res.data.value).data
|
||||
// posterInfo.value = data || { ...initState }
|
||||
|
||||
// setTimeout(() => {
|
||||
// htmlAddAnimations()
|
||||
// });
|
||||
// })
|
||||
useFetch('/api/poster/getPoster', { params: { poster_location: props.type, locale: locale.value } }).then(res => {
|
||||
const data = JSON.parse(res.data.value).data
|
||||
posterInfo.value = data
|
||||
console.log(data,'啊实打实大苏打')
|
||||
setTimeout(() => {
|
||||
htmlAddAnimations()
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
256
pages/index.vue
256
pages/index.vue
@ -14,7 +14,7 @@
|
||||
|
||||
<!-- 四个海报 -->
|
||||
<section>
|
||||
<div class="container poster-box">
|
||||
<div class="container poster-box animate__animated animate__fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="poster-img-box">
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
<!-- 精选推荐 -->
|
||||
<section>
|
||||
<div class="container update-big-box">
|
||||
<div class="container update-big-box animate__animated animate__fadeIn">
|
||||
|
||||
<div class="update-title-box">
|
||||
<h2><span>精选推荐<i>NEW</i></span></h2>
|
||||
@ -104,12 +104,262 @@
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Unity工程 -->
|
||||
<section class="index-bg ">
|
||||
<div class="container update-big-box">
|
||||
|
||||
<div class="update-title-box">
|
||||
<h2><span>Unity工程</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- 模型推荐 -->
|
||||
<section>
|
||||
<div class="container update-big-box">
|
||||
|
||||
<div class="update-title-box">
|
||||
<h2><span>模型推荐</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- 动画资源 -->
|
||||
<section class="index-bg">
|
||||
<div class="container update-big-box">
|
||||
|
||||
<div class="update-title-box">
|
||||
<h2><span>动画资源</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- 软件下载 -->
|
||||
<section>
|
||||
<div class="container update-big-box">
|
||||
|
||||
<div class="update-title-box">
|
||||
<h2><span>软件下载</span></h2>
|
||||
</div>
|
||||
|
||||
<div class="row content-list-box">
|
||||
<div v-for="item in 5" class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img src="https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg"
|
||||
alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">Blneder 微动态场景 旅途中</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">333</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">2</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30"
|
||||
src="https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132" />
|
||||
<div class="content-user-name f1">西瓜西了西</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">2024-03-01</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-box">
|
||||
<el-button class="btn" type="primary" size="large">查看更多</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<!-- <Final></Final> -->
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
301
pages/model/[idx]-[page].vue
Normal file
301
pages/model/[idx]-[page].vue
Normal file
@ -0,0 +1,301 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
<Poster :type=2></Poster>
|
||||
|
||||
<div class="background_box">
|
||||
|
||||
<main class="container font-size-box">
|
||||
|
||||
<!-- 分类 -->
|
||||
<div class="category-big-box">
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleActive(index)" v-for="(item, index) in typeList">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-box" v-if="typeChildrenList.length !== 0">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">二级分类</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item" :class="{ 'category-right-item-active': item.isActive }"
|
||||
@click="toggleChildActive(index)" v-for="(item, index) in typeChildrenList">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-line"></div>
|
||||
|
||||
<div class="category-box">
|
||||
<div class="category-left-box">
|
||||
<div class="category-title">排序</div>
|
||||
</div>
|
||||
<div class="category-right-box">
|
||||
<div class="category-right-item sort" @click="handleSort(1)">
|
||||
<span>最新</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(2)">
|
||||
<span>推荐</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(3)">
|
||||
<span>下载</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="category-right-item sort" @click="handleSort(4)">
|
||||
<span>浏览</span>
|
||||
<el-icon>
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 模块渲染列表 -->
|
||||
<div v-if="dataList.length != 0" class="content-big-box animate__animated animate__fadeIn">
|
||||
<div class="row content-list-box">
|
||||
|
||||
<nuxt-link v-for="(item, index) in dataList" :to="getHerf(getLink(item))" class="col-lg-3 col-md-6 col-sm-6 col-xs-6 jump">
|
||||
<div class="content-box">
|
||||
<div class="content-img-box">
|
||||
<img :src=item.img alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box-content">
|
||||
<div class="content-box-title f1">{{ item.title }}</div>
|
||||
<div class="content-rate-box">
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<View />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.view }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<ChatLineRound />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.comment }}</div>
|
||||
</div>
|
||||
<div class="content-rate-icon-box">
|
||||
<el-icon class="content-rate-icon">
|
||||
<Download />
|
||||
</el-icon>
|
||||
<div class="content-rate-num">{{ item.download }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-line"></div>
|
||||
|
||||
<div class="content-user-box">
|
||||
<div class="content-user-img-box">
|
||||
<el-avatar class="content-user-img" :size="30" :src=item.user_img />
|
||||
<div class="content-user-name f1">{{ item.user_name }}</div>
|
||||
</div>
|
||||
<div class="content-user-send-time">{{ item.send_time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_none" v-else>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="page-box">
|
||||
<pagination class="page" :total="total" v-model:page="queryParams.page"
|
||||
v-model:limit="queryParams.limit" @pagination="routerJump()" />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 预对接
|
||||
let dataList = ref([
|
||||
{
|
||||
id: 1,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
link: "",
|
||||
img: "https://img.alicdn.com/imgextra/i3/1856665554/O1CN01c03yxb1qtmhbG47Mv_!!1856665554.jpg",
|
||||
title: "Blneder 微动态场景 旅途中",
|
||||
view: 333,
|
||||
comment: 11,
|
||||
download: 2,
|
||||
user_img: "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKo3fnCIM2dHYJnMj04OIHwFqgFs84camsicv6MticPsXKBsoQQPhSJCW6IiaUBZy7ib0LdUhwr9WuRuDI33ibN4xmZR6kia9r9zaaWCAxTia0yiawRWg/132",
|
||||
user_name: "西瓜西了西",
|
||||
send_time: "2024-03-01",
|
||||
},
|
||||
])
|
||||
let typeList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "全部",
|
||||
isActive: true
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "三渲二",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "交通工具",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "武器兵刃",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人物角色",
|
||||
isActive: false
|
||||
},
|
||||
])
|
||||
let typeChildrenList = ref([
|
||||
])
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let active = reactive({ idx: Number(route.params.idx), name: typeList.value[0] })
|
||||
|
||||
watch(active, (nv) => {
|
||||
router.push(String(nv['idx']) + "-1")
|
||||
})
|
||||
|
||||
// --- 参数 ---
|
||||
let total = ref(0)
|
||||
const queryParams = reactive({
|
||||
page: parseInt(route.params.page) || 1,
|
||||
idx: parseInt(route.params.idx) || 0,
|
||||
locale: locale.value,
|
||||
limit: 10
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const routerJump = function () {
|
||||
let { page } = queryParams
|
||||
router.push("1-" + String(page))
|
||||
}
|
||||
|
||||
const getLink = function (item) {
|
||||
if (item?.link) {
|
||||
return item?.link;
|
||||
} else {
|
||||
return "/model/details/" + item.id;
|
||||
}
|
||||
}
|
||||
|
||||
// 切换激活状态的方法
|
||||
const toggleActive = (index) => {
|
||||
typeList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
// 切换子类激活状态的方法
|
||||
const toggleChildActive = (index) => {
|
||||
typeChildrenList.value.forEach(item => {
|
||||
item.isActive = false;
|
||||
});
|
||||
typeChildrenList.value[index].isActive = true;
|
||||
};
|
||||
|
||||
const handleSort = (type) => {
|
||||
console.log(type);
|
||||
}
|
||||
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻类型列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// res.unshift({
|
||||
// href: '/product/product_list/0-1',
|
||||
// name: t('home.products.all')
|
||||
// })
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
|
||||
// 获取新闻列表
|
||||
// useFetch('/api/news/getNewsList', { params: queryParams, locale: locale.value }).then(res => {
|
||||
// total.value = JSON.parse(res.data.value).count || 0
|
||||
// newsList.value = JSON.parse(res.data.value).data || []
|
||||
// })
|
||||
|
||||
// 添加流量访问
|
||||
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 2,
|
||||
})
|
||||
htmlAddAnimations()
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/list/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/list/media.scss"></style>
|
||||
165
pages/model/details/[id].vue
Normal file
165
pages/model/details/[id].vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
|
||||
<Head>
|
||||
<Title>{{ newsDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
|
||||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||||
<Meta :content=tdk?.tdk_description name="description" />
|
||||
</Head>
|
||||
|
||||
<Header></Header>
|
||||
<Poster :type=1 :title="newsDetail.news_title"></Poster>
|
||||
|
||||
<div class="container">
|
||||
<div class="news">
|
||||
<div class="news__title">
|
||||
<h1>{{ newsDetail.news_title }}</h1>
|
||||
<h3 class="news__date">{{ newsDetail.news_issue_date }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- 渲染新闻富文本 -->
|
||||
<section class="news__detail" v-html="newsDetail.news_content"></section>
|
||||
|
||||
<div class="news__paging">
|
||||
<div class="news__paging-prev">
|
||||
<template v-if="newsDetail.prev">
|
||||
<nuxt-link :to="getHerf('/news/details/' + newsDetail.prev?.news_id)">
|
||||
{{ newsDetail.prev?.news_title }}
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('news.noprev') }}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="news__paging-next">
|
||||
<template v-if="newsDetail.next">
|
||||
<nuxt-link :to="getHerf('/news/details/' + newsDetail.next?.news_id)">
|
||||
{{ newsDetail.next?.news_title }}
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t('news.nonext') }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Final></Final>
|
||||
<PopupSidebar></PopupSidebar>
|
||||
<PopupMessageUs></PopupMessageUs>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { l, locale } = useI18n();
|
||||
// --- 接口对接 ---
|
||||
// 参数
|
||||
const route = useRoute()
|
||||
|
||||
// 预对接
|
||||
let newsDetail = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
fontSizeReactive({
|
||||
880: 1,
|
||||
480: 1,
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// 获取新闻详情
|
||||
useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
|
||||
newsDetail.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
|
||||
// 获取Tdk
|
||||
let tdk = ref({})
|
||||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||||
tdk.value = JSON.parse(res.data.value).data
|
||||
})
|
||||
// 添加流量访问
|
||||
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.news {
|
||||
padding: 80px 0px;
|
||||
|
||||
&__title {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 40px;
|
||||
border-bottom: 1px solid var(--rootColor);
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
:deep(p) {
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #222;
|
||||
text-indent: 2em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
&__paging {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
width: 45%;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--rootColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 13px 10px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--rootColor);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #fff
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -124,8 +124,6 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
||||
<style scoped src="~/assets/css/business/news/media.scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.news-big-box {
|
||||
margin-top: 50px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user