<template>
|
<div class="watchlists">
|
<tab-head></tab-head>
|
|
<div class="swiper">
|
<div class="swiper-wrapper flex-start">
|
<div class="swiper-slide" v-for="i in usDataStockBeans" :key="i.id">
|
<index-component :ids="'c' + i.id" :dataObj="i"></index-component>
|
</div>
|
</div>
|
</div>
|
|
<div class="division"></div>
|
|
<div class="subheading">
|
<div class="subheading_title flex-start">
|
<img src="../../assets/img/shortcut.png" alt="" />
|
<span style="flex:1">{{ $t("hj61") }}</span>
|
<span class="edit" @click="onEdit">{{
|
editorShow ? $t("完成") : $t("编辑")
|
}}</span>
|
</div>
|
|
<stock-list
|
ref="stockList"
|
:listApi="listApi"
|
:editorShow.sync="editorShow"
|
></stock-list>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "@/components/tabHead.vue";
|
import indexComponent from "@/components/index-component.vue";
|
import stockList from "@/components/stock-list.vue";
|
import * as api from "@/axios/api";
|
export default {
|
name: "watchlists",
|
components: {
|
tabHead,
|
indexComponent,
|
stockList
|
},
|
computed: {},
|
data() {
|
return {
|
msg: "watchlists",
|
editorShow: false,
|
usDataStockBeans: [],
|
listApi: api.getMyList
|
};
|
},
|
created() {
|
this.getData();
|
},
|
methods: {
|
onEdit() {
|
// this.$refs.stockList.onEdit();
|
this.editorShow = !this.editorShow;
|
},
|
|
// 获取首页数据
|
async getData() {
|
let data = await api.getHomePageData();
|
|
console.log(data.data.usDataStockBeans, "djwkaldjwaldkj");
|
|
this.usDataStockBeans = data.data.usDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green: #c4d600;
|
|
.watchlists {
|
font-size: 10vw;
|
width: 100vw;
|
min-height: 100vh;
|
padding-bottom: 1.5rem;
|
|
.subheading {
|
padding-bottom: 0.25em;
|
|
.subheading_title {
|
display: flex;
|
align-items: center;
|
padding: 0.35em 0.25em 0.35em 0.25em;
|
|
.edit {
|
color: @green;
|
}
|
|
img {
|
width: 0.5em;
|
height: 0.5em;
|
margin-right: 0.25em;
|
}
|
|
span {
|
font-size: 0.5em;
|
line-height: 0.5em;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.division {
|
width: 100%;
|
height: 0.25em;
|
background-color: #f5f5f5;
|
}
|
|
.swiper {
|
width: 10em;
|
overflow-x: auto;
|
padding-bottom: 0.25em;
|
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
.swiper-wrapper {
|
width: 14.5em;
|
margin-top: 0.4em;
|
padding-left: 0.25em;
|
|
.swiper-slide {
|
margin-right: 0.25em;
|
width: 4.5em;
|
height: 3.2em;
|
background-color: rgba(red, 0.1);
|
border-radius: 0.1em;
|
}
|
}
|
}
|
}
|
</style>
|
