|
- <template>
- <div>
- <Swiper :banner-array="carouselList" />
- <div id="hot">
- <div class="content">
- <div class="left">
- <h1>{{ data.title }}</h1>
- <div class="date">发布日期: {{ $moment(data.sendDate).format('YYYY-MM-DD HH:mm:ss') }}</div>
- <div class="list" v-html="data.detail"></div>
- </div>
- <RightList />
- </div>
- </div>
- </div>
- </template>
- <script>
- import Swiper from '@/components/swiper'
- import RightList from './right.vue'
- import { lunboList } from '@/api/home.js'
- import { detailApi } from '@/api/article.js'
-
- export default {
- name: 'home',
- data () {
- return {
- carouselList: [],
- news: [],
- videos: [],
- data: {}
- }
- },
- components: {
- Swiper,
- RightList
- },
- mounted () {},
- created () {
- this.getlunboList()
- this.getDetail()
- },
- methods: {
- async getlunboList () {
- const { data: { code, data } } = await lunboList()
- if (code === 200) {
- this.carouselList = data.list
- }
- },
- async getDetail () {
- const { data: { code, data } } = await detailApi(this.$route.query.id)
- if (code === 200) {
- this.data = data
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .el-carousel__item{
- background-size: 100%;
- background-repeat: no-repeat;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- #txt {
- display: flex;
- flex-direction: column;
- margin-bottom: 50px;
- color: #FFFFFF;
- .title {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- margin-bottom: 15px;
-
- }
- .subtitle {
- font-size: 16px;
- font-weight: 400;
- opacity: 0.5;
- text-align: center;
- }
- }
- }
- #hot {
- width: 100%;
- background: #F2F4F8;
- display: flex;
- justify-content: center;
- .content {
- width: 1200px;
- margin: 50px 0 50px 0;
- display: flex;
- justify-content: space-between;
- .left{
- width: 820px;
- padding: 30px;
- width: 820px;
- background-color: #FFFFFF;
- h1 {
- margin: 0;
- }
- .date {
- font-size: 14px;
- color: #7D8392;
- line-height: 30px;
- margin: 30px 0;
- }
- }
- .list {
- overflow: hidden;
- .article {
- display: flex;
- img {
- width: 200px;
- height: 150px;
- }
- .acontent {
- height: 150px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 0 10px;
- margin-bottom: 20px;
- .txt {
- a {
- display: block;
- text-align: left;
- }
- }
- .title {
- font-size: 18px;
- font-weight: bold;
- color: #000000;
- line-height: 48px;
- }
- .content {
- font-size: 14px;
- font-weight: 400;
- color: #000000;
- line-height: 24px;
- }
- .date {
- font-size: 14px;
- font-weight: 400;
- color: #7D8392;
- line-height: 30px;
- text-align: left;
- }
- }
- .acontent:not(:last-child) {
- margin-bottom: 0px;
- }
- }
- }
- }
- }
-
- .el-pagination.is-background .el-pager li:not(.disabled).active {
- background-color: #07CAAF;
- }
- </style>
|