|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457 |
- <template>
- <div>
- <el-carousel >
- <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
- <a :href="item.link">
- <div id="txt">
- <a class="title">{{ item.title }}</a>
- <a class="subtitle">{{ item.subtitle }}</a>
- </div>
- </a>
- </el-carousel-item>
- </el-carousel>
- <div id="hot">
- <div class="content">
- <div class="top">
- <el-carousel :interval="5000" arrow="always" height="470px">
- <template v-for="(item, index) in hotList.left" >
- <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'">
- <div class="lr videocar">
- <video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/>
- <img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index">
- </div>
- <div id="hottxt" class="lr">
- <div class="txtcontent">
- <div class="title">
- <img src="@/assets/tt.png">
- {{ hotList.right[index].title }}
- </div>
- <p class="content">{{ hotList.right[index].content }}</p>
- </div>
- <div class="btn">
- <el-button plain class="more" size="small">MORE</el-button>
- </div>
- </div>
- </el-carousel-item>
- </template>
- </el-carousel>
- <!-- <div id="videocar" class="lr">
- <el-carousel :interval="5000" arrow="always" height="470px">
- <template v-for="(item, index) in hotList.left" >
- <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'">
- <video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/>
- <img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index">
- </el-carousel-item>
- </template>
- </el-carousel>
- </div> -->
- <!-- <div id="hottxt" class="lr">
- <el-carousel :interval="5000" height="470px">
- <el-carousel-item v-for="item in hotList.right" :key="item.title">
- <div class="txtcontent">
- <div class="title">
- <img src="@/assets/tt.png">
- {{ item.title }}
- </div>
- <p class="content">{{ item.content }}</p>
- </div>
- <div class="btn">
- <el-button plain class="more" size="small">MORE</el-button>
- </div>
- </el-carousel-item>
- </el-carousel>
- </div> -->
- </div>
- <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
- </div>
- </div>
- <div id="daliay">
- <div class="content">
- <div class="top">
- <div class="yyzrbtxt lr">
- <img src="@/assets/rblogo.png" class="logo">
- <el-carousel :interval="5000" arrow="always" height="470px">
- <template v-for="(item, index) in daliay.left" >
- <el-carousel-item :key="index">
- <div class="txtcontent">
- <div class="title">
- {{ item.title }}
- </div>
- <p class="content" v-html="item.content" />
- </div>
- <div class="btn">
- <el-button plain class="more" size="small">MORE</el-button>
- </div>
- </el-carousel-item>
- </template>
- </el-carousel>
- </div>
- <div class="yyzrbimg lr" >
- <el-carousel :interval="5000" arrow="always" height="470px">
- <template v-for="(item, index) in daliay.right" >
- <el-carousel-item :key="index">
- <img :src="item.img" alt="">
- </el-carousel-item>
- </template>
- </el-carousel>
- </div>
- </div>
- <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
- </div>
- </div>
- <div id="wk">
- <a :href="alink" target="_blank">
- <img src="@/assets/wk.png" alt="">
- <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
- </a>
- </div>
- </div>
- </template>
- <script>
- import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js'
- export default {
- name: 'home',
- data () {
- return {
- carouselList: [],
- hotList: {
- left: [],
- right: []
- },
- gg1: '',
- gg2: '',
- alink: '',
- daliay: {
- left: [],
- right: [],
- title: '',
- content: '',
- img: ''
- },
- display: 0
- }
- },
- components: {
- },
- mounted () {
- this.gethotnewsConfig()
- this.getlunboList()
- this.getcarNewsHotList()
- this.getguanggao()
- this.getLink()
- this.getyuanyuzhouHotList()
- },
- methods: {
- async getlunboList () {
- const { data: { message, data } } = await lunboList()
- if (message === 'success') {
- for (const iter of data.list) {
- this.carouselList.push({
- src: iter.image,
- title: iter.title,
- subtitle: iter.subtitle,
- link: iter.link
- })
- }
- }
- },
- async getcarNewsHotList () {
- const { data: { message, data } } = await carNewsHotList()
- if (message === 'success') {
- for (const iter of data.list) {
- const { image, video, title, subTitle } = iter.news
- this.hotList.left.push(video)
- this.hotList.right.push({
- title: title,
- content: subTitle,
- png: image
- })
- }
- }
- },
- async getguanggao () {
- const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
- const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
-
- if (ggm1 === 'success' && ggm2 === 'success') {
- this.gg1 = gg1.image
- this.gg2 = gg2.image
- }
- },
- async getLink () {
- const { data: { message, data: { link: alink } } } = await link()
- if (message === 'success') {
- this.alink = alink
- }
- },
- async getyuanyuzhouHotList () {
- const { data: { message, data: { list } } } = await yuanyuzhouHotList()
- if (message === 'success') {
- for (const iter of list) {
- console.log(iter)
- this.daliay.left.push({
- title: iter.news.title,
- content: iter.news.detail
- })
- this.daliay.right.push({
- img: iter.news.image
- })
- }
- }
- },
- async gethotnewsConfig () {
- const { data: { message, data: { display } } } = await hotnewsConfig()
- if (message === 'success') {
- this.display = display
- }
- },
- videoPlayer (value, play) {
- const id = document.getElementById(value)
- const playid = document.getElementById(play)
- if (id.paused) {
- id.play()
- playid.style.display = 'none'
- } else {
- id.pause()
- playid.style.display = 'block'
- }
- }
- }
- }
- </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;
- }
- }
- }
- .lunbo {
- background-size: auto;
- background-position: center;
- a{
- width: 100%;
- height: 100%;
- }
- }
- #hot, #daliay {
- width: 100%;
- background: #E3E5EA;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 25px 0;
- .content {
- width: 1200px;
- // height: 90%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .top, .bottom {
- width: 100%;
- }
- .top {
- // min-height: 470px;
- // background: black;
- display: flex;
- // padding-bottom: 30px;
- .lr {
- width: 50%;
- height: 100%;
- video {
- width: 100%;
- height: 100%;
- }
-
- }
- .videocar {
- position: relative;
- .play {
- position: absolute;
- margin: 0 auto;
- top: 50%;
- margin-left: 45%;
- margin-top: -50px;
- }
- }
-
- .el-carousel {
- width: 100% !important;
- }
- #hottxt {
- background: #000000e6;
- background-image: url('../../assets/footer_left.png');
- background-position: 140% -165px; /* 调整这些值来改变显示的部分 */
- background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
- background-repeat: no-repeat;
- display: flex;
- align-items: center;
- flex-direction: column;
- width: 50%;
- padding: 0 40px;
- :deep .el-carousel__indicators--horizontal {
- left: 90%;
- }
- :deep .el-carousel__button {
- width: 5px;
- border-radius: 50%;
- height: 5px;
- }
- .txtcontent {
- height: 50% !important;
- width:100%;
- padding-top: 20px;
-
- .title {
- height: 26px;
- font-size: 24px;
- font-weight: bold;
- color: #FFFFFF;
- width: 100%;
- display: flex;
- text-align: left;
- img {
- width: 60px;
- height: 28px;
- margin-right: 10px;
- vertical-align: middle;
- }
- }
- p {
- text-align: left;
- width: 85%;
- font-size: 16px;
- font-weight: 400;
- line-height: 30px;
- color: #ffffff83;
- }
- }
- .btn {
- height: 20%;
- width:100%;
- position: relative;
- .more {
- position: absolute;
- left: 0px;
- background: none !important;
- border: 1px solid #00F6BD;
- opacity: 0.8;
- border-radius: 4px;
- color: #00F6BD;
- }
- }
- }
- }
- .bottom {
- min-height: 120px;
- background-image: url('../../assets/bottom.png');
- background-size: 100% 100%;
- margin-top: 30px;
- }
- }
- }
- #daliay {
- background: #F2F4F8;
- padding-top: 60px;
- .logo {
- position: absolute;
- left: 0;
- }
- .top {
- justify-content: space-between;
- position: relative;
- .yyzrbtxt, .yyzrbimg{
- height: 100%;
- width: 47%;
- .txtcontent {
- height: 80% !important;
- text-align: left;
- margin-right: 50px;
- width: 90%;
- .title {
- border-left: 7px solid #07CAAF;
- font-size: 36px;
- font-weight: bold;
- color: #0D1114;
- width: 90%;
- text-align: left;
- padding-left:30px;
-
- }
- .content {
- font-size: 16px;
- font-weight: 400;
- color: #0D1114;
- line-height: 30px;
- width: 100%;
- text-align: left;
- margin-top: 40px;
- }
- }
- .btn {
- width:100%;
- position: absolute;
- bottom: 55px;
- .more {
- position: absolute;
- left: 0px;
- background: none !important;
- border: 1px solid #000000;
- color: #0D1114;
- opacity: 0.8;
- border-radius: 4px;
- width: 80px;
- }
- }
- }
- .yyzrbimg {
- width: 50% !important;
- img{
- width: 580px;
- height: 438px;
- }
- }
- }
- }
- #wk {
- width: 100%;
- position: relative;
- img {
- width: 100%;
- }
- .el-button--primary {
- width: 200px;
- height: 60px;
- background: #07CAAF;
- border-radius: 12px;
- border: none;
- font-size: 18px;
- font-weight: 400;
- color: #FFFFFF;
- position: absolute;
- bottom: 10%;
- left: 50%;
- margin-left: -100px;
- }
- }
- </style>
|