From 0d29d9a2bf0d893a67f1263bb9525131a50a2128 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Sat, 23 Mar 2024 11:12:55 +0800
Subject: [PATCH] 首次提交大宝wap
---
src/page/home/newHome.vue | 545 +++++++++++++++++++++++++++---------------------------
1 files changed, 272 insertions(+), 273 deletions(-)
diff --git a/src/page/home/newHome.vue b/src/page/home/newHome.vue
index fc5a459..b5d3960 100644
--- a/src/page/home/newHome.vue
+++ b/src/page/home/newHome.vue
@@ -25,7 +25,7 @@
:style="{backgroundImage:`url(${$state.theme=='red'?r_bg:b_bg})`}"
>
<div class="content ">
- <div
+ <div
:class="i.floatPoint<0?'tab greenBg text-center':'tab redBg text-center'"
v-for="(i,index) in market"
v-if="index < 3"
@@ -43,7 +43,7 @@
</div>
<!-- 导航路由 -->
<div class="icon-router clearfix home-ico-router">
-
+
<div class="col-xs-3 text-center">
<a class='icon-wrap animated zoomIn' @click="goList" href="javascript:;">
<img
@@ -102,7 +102,7 @@
<span class="right">{{new Date(artList.addTime).getFullYear()}}-{{new Date(artList.addTime).getMonth()+1}}-{{new Date(artList.addTime).getDate()}}</span>
</div>
</div>
-
+
<!-- <div class="nav-bg page-part" @click="goList">
<img class="img" src="../../assets/img/shangpinbg.png" alt="shangpinbg">
</div> -->
@@ -117,8 +117,8 @@
<img style="width:100%;height: 100%;" :src="banner.bannerUrl" alt="">
</a>
</mt-swipe-item>
- </mt-swipe>
- </div>
+ </mt-swipe>
+ </div>
<!-- 轮播图 -->
<AllList/>
<div class="swiper-ad">
@@ -127,13 +127,13 @@
v-for="banner in bannerList"
:key="banner.id"
>
- <a
+ <a
class="banner-ad"
:href="banner.targetUrl || null">
<img style="width:100%;height: 100%;" :src="banner.bannerUrl" alt="">
</a>
</mt-swipe-item>
- </mt-swipe>
+ </mt-swipe>
</div>
<!-- <div v-show="true" class="box page-part">
<div class="box-title">
@@ -179,7 +179,7 @@
<mt-tab-container v-model="news" :swipeable="true">
<mt-tab-container-item id="tab_0">
<div class="news-content">
- <div
+ <div
class="news-item"
v-for="item of newsContent1"
:key="item.id"
@@ -197,7 +197,7 @@
</mt-tab-container-item>
<mt-tab-container-item id="tab_1">
<div class="news-content">
- <div
+ <div
class="news-item"
v-for="item of newsContent2"
:key="item.id"
@@ -215,7 +215,7 @@
</mt-tab-container-item>
<mt-tab-container-item id="tab_2">
<div class="news-content">
- <div
+ <div
class="news-item"
v-for="item of newsContent3"
:key="item.id"
@@ -233,7 +233,7 @@
</mt-tab-container-item>
<mt-tab-container-item id="tab_3">
<div class="news-content">
- <div
+ <div
class="news-item"
v-for="item of newsContent4"
:key="item.id"
@@ -251,7 +251,7 @@
</mt-tab-container-item>
<mt-tab-container-item id="tab_4">
<div class="news-content">
- <div
+ <div
class="news-item"
v-for="item of newsContent5"
:key="item.id"
@@ -270,244 +270,244 @@
</mt-tab-container>
</div>
<!-- tab -->
-
+
<foot></foot>
</div>
-
+
</template>
-
- <script>
- import foot from '@/components/foot/foot'
- import AllList from '@/page/list/list-all'
- import HomeList from './components/home-list'
- import { Toast } from 'mint-ui'
- import * as api from '@/axios/api'
- import bannerImg from '../../assets/img/banner.png'
- import eventBus from '@/event.js'
-
- export default {
- components: {
- foot,
- HomeList,
- AllList
- },
- props: {},
- data () {
- return {
- news:'tab_0',
- market: [],
- moveStats: false,
- bannerList: '',
- bannerImg: bannerImg,
- // market: {}, // 大盘指数
- changeTextClass: {},
- artList: {}, // 公告列表
- timer: null,
- timer2: null,
- settingForm: {
- futuresDisplay: false,
- indexDisplay: false,
- kcStockDisplay: false,
- stockDisplay: false
- },
- theme: 'black',
- newsContent1: [], // 财经要闻
- newsContent2: [], // 经济数据
- newsContent3: [], // 全球股市
- newsContent4: [], // 7*24全球
- newsContent5: [], // 商品资讯,
- b_bg:require('../../../static/img/bg-zhisu.png'),
- r_bg:require('../../../static/img/bg-zhisu-red.png')
+
+<script>
+import foot from '@/components/foot/foot'
+import AllList from '@/page/list/list-all'
+import HomeList from './components/home-list'
+import { Toast } from 'mint-ui'
+import * as api from '@/axios/api'
+import bannerImg from '../../assets/img/banner.png'
+import eventBus from '@/event.js'
+
+export default {
+ components: {
+ foot,
+ HomeList,
+ AllList
+ },
+ props: {},
+ data () {
+ return {
+ news: 'tab_0',
+ market: [],
+ moveStats: false,
+ bannerList: '',
+ bannerImg: bannerImg,
+ // market: {}, // 大盘指数
+ changeTextClass: {},
+ artList: {}, // 公告列表
+ timer: null,
+ timer2: null,
+ settingForm: {
+ futuresDisplay: false,
+ indexDisplay: false,
+ kcStockDisplay: false,
+ stockDisplay: false
+ },
+ theme: 'black',
+ newsContent1: [], // 财经要闻
+ newsContent2: [], // 经济数据
+ newsContent3: [], // 全球股市
+ newsContent4: [], // 7*24全球
+ newsContent5: [], // 商品资讯,
+ b_bg: require('../../../static/img/bg-zhisu.png'),
+ r_bg: require('../../../static/img/bg-zhisu-red.png')
+ }
+ },
+ created () {
+ this.getProductSetting()
+ // this.timer = setInterval(this.refreshList, 3000)
+ },
+
+ beforeDestroy () {
+ clearInterval(this.timer)
+ clearInterval(this.timer2)
+ },
+ computed: {},
+ // 更新的时候运动
+ updated () {
+ if (!this.moveStats) {
+ this.move()
+ }
+ },
+ methods: {
+ async getNewsList (type) {
+ let data = await api.queryNewsList(type)
+ console.log('xinwen:', data)
+ switch (type) {
+ case 1:
+ this.newsContent1 = data.data.list
+ break
+ case 2:
+ this.newsContent2 = data.data.list
+ break
+ case 3:
+ this.newsContent3 = data.data.list
+ break
+ case 4:
+ this.newsContent4 = data.data.list
+ break
+ case 5:
+ this.newsContent5 = data.data.list
+ break
}
},
- created () {
- this.getProductSetting()
- // this.timer = setInterval(this.refreshList, 3000)
+ // 主题切换
+ handleChangeThemeClick () {
+ if (this.theme === 'black') {
+ eventBus.$emit('getTheme', 'red')
+ this.theme = 'red'
+ } else {
+ eventBus.$emit('getTheme', 'black')
+ this.theme = 'black'
+ }
},
-
- beforeDestroy () {
- clearInterval(this.timer)
+ move () {
+ // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
+ if (!document.getElementById('node')) {
+ return
+ }
+ let width = document.getElementById('node').getBoundingClientRect().width
+ // let width = this.$refs.node.getBoundingClientRect().width
+ let box = document.getElementById('box')
+ let copy = document.getElementById('copy')
+ copy.innerText = this.artList.artTitle // 文字副本填充
+ let distance = 0 // 位移距离
+ // 设置位移
+ this.moveStats = true
clearInterval(this.timer2)
+ this.timer2 = setInterval(function () {
+ distance = distance - 1
+ // 如果位移超过文字宽度，则回到起点
+ if (-distance >= width) {
+ distance = 16
+ // clearInterval(timer)
+ }
+ box.style.transform = 'translateX(' + distance + 'px)'
+ }, 30)
},
- computed: {},
- // 更新的时候运动
- updated () {
- if (!this.moveStats) {
- this.move()
+ async getArtList () {
+ // 获取公告列表
+ let opts = {
+ pageNum: 1,
+ pageSize: 1
+ }
+ let result = await api.getArtList(opts)
+ if (result.status === 0) {
+ if (result.data.list.length > 0) {
+ this.artList = result.data.list[0]
+ }
+ } else {
+ this.$message.error(result.msg)
}
},
- methods: {
- async getNewsList(type) {
- let data = await api.queryNewsList(type);
- console.log('xinwen:',data)
- switch(type) {
- case 1:
- this.newsContent1 = data.data.list
- break;
- case 2:
- this.newsContent2 = data.data.list
- break;
- case 3:
- this.newsContent3 = data.data.list
- break;
- case 4:
- this.newsContent4 = data.data.list
- break;
- case 5:
- this.newsContent5 = data.data.list
- break;
- }
- },
- // 主题切换
- handleChangeThemeClick() {
- if (this.theme === 'black') {
- eventBus.$emit("getTheme", 'red');
- this.theme = 'red'
- } else {
- eventBus.$emit("getTheme", 'black');
- this.theme = 'black'
- }
- },
- move () {
- // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
- if (!document.getElementById('node')) {
- return
- }
- let width = document.getElementById('node').getBoundingClientRect().width
- // let width = this.$refs.node.getBoundingClientRect().width
- let box = document.getElementById('box')
- let copy = document.getElementById('copy')
- copy.innerText = this.artList.artTitle // 文字副本填充
- let distance = 0 // 位移距离
- // 设置位移
- this.moveStats = true
- clearInterval(this.timer2)
- this.timer2 = setInterval(function () {
- distance = distance - 1
- // 如果位移超过文字宽度，则回到起点
- if (-distance >= width) {
- distance = 16
- // clearInterval(timer)
- }
- box.style.transform = 'translateX(' + distance + 'px)'
- }, 30)
- },
- async getArtList () {
- // 获取公告列表
- let opts = {
- pageNum: 1,
- pageSize: 1
- }
- let result = await api.getArtList(opts)
- if (result.status === 0) {
- if (result.data.list.length > 0) {
- this.artList = result.data.list[0]
- }
- } else {
- this.$message.error(result.msg)
- }
- },
- async getMarket () {
- // 获取大盘指数
- // let result = await api.getMarket()
- let result = await api.getIndexMarket()
- if (result.status === 0) {
- this.market = result.data
- } else {
- Toast(result.msg)
- }
- },
- async refreshList () {
- // 刷新大盘指数
- let result = await api.getIndexMarket()
- this.changeTextClass = {}
- if (+result.status === 0) {
- // this.market = result.data.market
- result.data.forEach((element, i) => {
- this.changeTextClass[i] = ''
- if (element.currentPoint !== this.market[i].currentPoint) {
- this.changeTextClass[i] = true // 设置对应的动画过滤
- this.market[i].currentPoint = element.currentPoint
- this.market[i].floatPoint = element.floatPoint
- this.market[i].floatRate = element.floatRate
- }
- })
- } else {
- Toast(result.msg)
- }
- },
- async getBanner () {
- // 获取显示的banner
- let result = await api.getBannerByPlat({ platType: 'm' })
- if (result.status === 0) {
- this.bannerList = result.data
- } else {
- Toast(result.msg)
- }
- },
- async getProductSetting () {
- // 获取产品配置信息
- let result = await api.getProductSetting()
- if (+result.status === 0) {
- this.settingForm = result.data
- } else {
- Toast(result.msg)
- }
- },
- articleList () {
- // 新手
- this.$router.push('/articleList')
- },
- toBuy () {
- // 去购买页面
- this.$router.push('/buy')
- },
- goList () {
- // 去列表页面
- this.$router.push('/list')
- },
- goMyList () {
- this.$router.push('/mylist')
- },
- goOrderlist () {
- this.$router.push('/orderlist')
- },
- goMyinfo () {
- this.$router.push('/user')
- },
- goIndexList () {
- this.$router.push('/indexlist')
- },
- toDetail () {
- // 去列表页面
- this.$router.push('/listdetail')
- },
- toAltDetail () {
- this.$router.push({
- path: 'alertdetail',
- query: {
- id: this.artList.id
+ async getMarket () {
+ // 获取大盘指数
+ // let result = await api.getMarket()
+ let result = await api.getIndexMarket()
+ if (result.status === 0) {
+ this.market = result.data
+ } else {
+ Toast(result.msg)
+ }
+ },
+ async refreshList () {
+ // 刷新大盘指数
+ let result = await api.getIndexMarket()
+ this.changeTextClass = {}
+ if (+result.status === 0) {
+ // this.market = result.data.market
+ result.data.forEach((element, i) => {
+ this.changeTextClass[i] = ''
+ if (element.currentPoint !== this.market[i].currentPoint) {
+ this.changeTextClass[i] = true // 设置对应的动画过滤
+ this.market[i].currentPoint = element.currentPoint
+ this.market[i].floatPoint = element.floatPoint
+ this.market[i].floatRate = element.floatRate
}
})
+ } else {
+ Toast(result.msg)
}
},
- mounted () {
- this.getNewsList(1)
- this.getNewsList(2)
- this.getNewsList(3)
- this.getNewsList(4)
- this.getNewsList(5)
- this.getMarket() // 获取大盘指数
- this.getBanner() //获取banner
- this.getArtList() // 获取公告
- // let header = document.querySelector('.header-box')
- let body = document.querySelector('.wrapper')
- // header.style.display = 'none'
- body.style.height = 'calc(100%)'
- body.style.paddingBottom = '0'
+ async getBanner () {
+ // 获取显示的banner
+ let result = await api.getBannerByPlat({ platType: 'm' })
+ if (result.status === 0) {
+ this.bannerList = result.data
+ } else {
+ Toast(result.msg)
+ }
+ },
+ async getProductSetting () {
+ // 获取产品配置信息
+ let result = await api.getProductSetting()
+ if (+result.status === 0) {
+ this.settingForm = result.data
+ } else {
+ Toast(result.msg)
+ }
+ },
+ articleList () {
+ // 新手
+ this.$router.push('/articleList')
+ },
+ toBuy () {
+ // 去购买页面
+ this.$router.push('/buy')
+ },
+ goList () {
+ // 去列表页面
+ this.$router.push('/list')
+ },
+ goMyList () {
+ this.$router.push('/mylist')
+ },
+ goOrderlist () {
+ this.$router.push('/orderlist')
+ },
+ goMyinfo () {
+ this.$router.push('/user')
+ },
+ goIndexList () {
+ this.$router.push('/indexlist')
+ },
+ toDetail () {
+ // 去列表页面
+ this.$router.push('/listdetail')
+ },
+ toAltDetail () {
+ this.$router.push({
+ path: 'alertdetail',
+ query: {
+ id: this.artList.id
+ }
+ })
}
+ },
+ mounted () {
+ this.getNewsList(1)
+ this.getNewsList(2)
+ this.getNewsList(3)
+ this.getNewsList(4)
+ this.getNewsList(5)
+ this.getMarket() // 获取大盘指数
+ this.getBanner() // 获取banner
+ this.getArtList() // 获取公告
+ // let header = document.querySelector('.header-box')
+ let body = document.querySelector('.wrapper')
+ // header.style.display = 'none'
+ body.style.height = 'calc(100%)'
+ body.style.paddingBottom = '0'
}
- </script>
+}
+</script>
<style lang="less" scoped>
@fontColor: #cfd0d1;
@fontColor2: #ccc;
@@ -534,66 +534,66 @@
width: 1.45rem;
}
}
-
+
.iconfont {
position: absolute;
left: 0;
vertical-align: middle;
margin-right: 0.1rem;
}
-
+
.pull-right {
width: 1.45rem;
}
-
+
.pull-right::before {
content: '';
height: 0.3rem;
border-left: 0.01rem solid #666;
padding-left: 0.15rem;
}
-
+
// 限制外框宽度，隐藏多余的部分
.wrap {
letter-spacing: 0.06rem;
overflow: hidden;
}
}
-
+
// 移动框宽度设置
#box {
width: 80000%;
}
-
+
// 文字一行显示
#box div {
float: left;
}
-
+
// 设置前后间隔
#marquee {
margin: 0 16px 0 0;
}
-
+
// 获取宽度的节点，隐藏掉
#node {
position: absolute;
z-index: -999;
top: -999999px;
}
-
+
.banner {
width: 100%;
height: 3.74rem;
height: 4.2rem;
overflow: hidden;
-
+
.banner-box {
width: 100%;
height: 100%;
position: relative;
opacity: 0.86;
-
+
.box {
position: absolute;
text-align: center;
@@ -601,7 +601,7 @@
width: 100%;
background: none;
}
-
+
.title {
color: #ff9600;
font-size: 0.46rem;
@@ -609,12 +609,12 @@
margin-bottom: 0.4rem;
letter-spacing: 0.08rem;
}
-
+
.desc {
font-size: 0.26rem;
margin-bottom: 0.8rem;
}
-
+
.target-btn {
display: inline-block;
font-size: 0.22rem;
@@ -623,19 +623,19 @@
border: 0.01rem solid #ff9600;
border-radius: 0.5rem;
}
-
+
.img {
width: 100%;
height: 100%;
}
}
-
+
}
-
+
.tipstexts {
// height: 0.91rem;
height: 0.41rem;
-
+
.horseLampModule {
width: 80%;
height: .91rem;
@@ -647,7 +647,7 @@
position: relative;
float: left;
}
-
+
.novice {
float: right;
height: 0.3rem;
@@ -659,7 +659,7 @@
border-left: .027rem solid #989898
}
}
-
+
.nav-bg {
width: 100%;
padding: 0 2%;
@@ -674,30 +674,30 @@
display: block;
}
}
-
+
.icon-router {
.col-xs-3 {
width: 25%;
}
}
-
+
/*大盘指数*/
-
+
.dynamic-info {
padding: .14rem;
border-bottom: .02rem solid rgba(147, 147, 147, .2);
}
-
+
.dynamic-info li {
float: left;
font-size: .25rem;
height: auto;
}
-
+
.dynamic-info li.tips {
width: 15%;
}
-
+
.dynamic-info li.tips p {
font-size: .22rem;
text-align: center;
@@ -708,19 +708,19 @@
background: url(../../assets/img/buyicon.png) no-repeat;
background-size: contain;
}
-
+
.dynamic-info li p {
font-size: .25rem;
}
-
+
.dynamic-name-code {
width: 25%;
}
-
+
.dynamic-phone-win {
width: 38%;
}
-
+
.dynamic-name-code p,
.dynamic-phone-win p {
font-size: .22rem;
@@ -728,20 +728,20 @@
padding-top: .18rem;
color: @fontColor2;
}
-
+
.dynamic-name-code p:first-child,
.dynamic-phone-win p:first-child {
font-size: .25rem;
// color: rgb(34, 34, 34);
}
-
+
.btn-group {
width: 22%;
text-align: right;
padding-top: .2rem;
padding-right: .14rem;
}
-
+
.btn-group button {
color: #fff;
width: 1.279rem;
@@ -750,7 +750,7 @@
background: rgb(213, 0, 0);
border: none;
}
-
+
.table-list .title {
ul li {
width: 33.33333333%;
@@ -758,7 +758,7 @@
padding-left: 15px;
}
}
-
+
.account-box {
position: relative;
background-color: #000C16;
@@ -819,7 +819,7 @@
}
.icon-router.home-ico-router {
padding: .4rem 0;
- background-color: #16171d !important;
+ background-color: #16171d !important;
}
.zhishu {
// background-image: url(../../../static/img/bg-zhisu.png);
@@ -873,7 +873,7 @@
&::-webkit-input-placeholder {
color: #363636;
}
- // color:
+ // color:
}
}
&-ctl {
@@ -923,7 +923,7 @@
/deep/.mint-tab-item-label {
color: #fff;
font-size: .26rem;
-
+
}
/deep/.is-selected .tab-name{
position: relative;
@@ -1071,4 +1071,3 @@
}
}
</style>
-
\ No newline at end of file
--
Gitblit v1.9.3