<template>
|
<div class="watchlists">
|
<tab-head></tab-head>
|
|
<div class="swiper">
|
<div class="swiper-wrapper flex-start">
|
<div class="swiper-slide">
|
<index-component :ids="'watchlists1'"></index-component>
|
</div>
|
<div class="swiper-slide">
|
<index-component :ids="'watchlists2'"></index-component>
|
</div>
|
<div class="swiper-slide">
|
<index-component :ids="'watchlists3'"></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"></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";
|
export default {
|
name: 'watchlists',
|
components: {
|
tabHead, indexComponent, stockList
|
},
|
computed: {
|
},
|
data() {
|
return {
|
msg: 'watchlists',
|
editorShow: false,
|
}
|
},
|
methods: {
|
onEdit() {
|
this.$refs.stockList.onEdit()
|
this.editorShow = !this.editorShow
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@green: #c4d600;
|
|
.watchlists {
|
font-size: 10vw;
|
width: 100vw;
|
min-height: 100vh;
|
padding-bottom: 1.5rem;
|
|
.subheading {
|
padding-bottom: .25em;
|
|
.subheading_title {
|
display: flex;
|
align-items: center;
|
padding: .35em .25em .35em .25em;
|
|
.edit {
|
color: @green;
|
}
|
|
img {
|
width: .5em;
|
height: .5em;
|
margin-right: .25em;
|
}
|
|
span {
|
font-size: .5em;
|
line-height: .5em;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.division {
|
width: 100%;
|
height: .25em;
|
background-color: #f5f5f5;
|
}
|
|
.swiper {
|
width: 10em;
|
overflow-x: auto;
|
padding-bottom: .25em;
|
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
.swiper-wrapper {
|
width: 14.5em;
|
margin-top: .4em;
|
padding-left: .25em;
|
|
.swiper-slide {
|
margin-right: .25em;
|
width: 4.5em;
|
height: 3.2em;
|
background-color: rgba(red, .1);
|
border-radius: .1em;
|
}
|
}
|
}
|
|
}
|
</style>
|
