Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit e0fd1b2b by amateur
Options

添加首页模块数据

1 parent 56315ddf
Inline Side-by-side
Showing 7 changed files with 191 additions and 4 deletions
src/assets/css/sprite.less
.icon-sprite { display: inline-block; background-image: url(../images/sprite.png); background-size: 1676px 1036px; }
.icon-bg-common { width: 828px; height: 360px; background-position: 0px -432px; }
.icon-bg-login { width: 828px; height: 412px; background-position: 0px 0px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -848px 0px; }
.icon-bg-navigation { width: 828px; height: 176px; background-position: -848px -566px; }
......@@ -9,4 +10,6 @@
.icon-user { width: 36px; height: 36px; background-position: -400px -812px; }
.icon-verification { width: 36px; height: 36px; background-position: -456px -812px; }
.icon-wechat { width: 80px; height: 78px; background-position: -244px -812px; }
.icon-bg-common { width: 828px; height: 360px; background-position: 0px -432px; }
\ No newline at end of file
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -948px -762px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -848px -762px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -898px -762px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

467 KB | W: | H:

src/assets/images/sprite.png

471 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/views/home/components/DataModule.vue 0 → 100644
<template>
<section class="data-module">
<div class="module-top-container">
<div class="module-top-left">
<span class="module-name">{{data.name}}</span>
<span v-if="data.isTop" class="module-top-btn">置顶</span>
</div>
<div class="module-more">
<span>更多</span>
</div>
</div>
<div class="module-content-container">
<div class="content-item" v-for="(item, idx) in data.list" :key="idx">
<div class="item-title" :class="{'item-recommend': item.isRecommend}">
<span v-if="item.isRecommend" class="item-recommend">推荐</span>
<span class="item-title-content">{{item.title}}</span>
</div>
<div class="item-content-bottom">
<div class="item-bottom-item">
<img class="item-bottom-icon" src="@/assets/icon/icon_clock.png">
<span class="item-bottom-text">更新日期：{{item.date}}</span>
</div>
<div class="item-bottom-item">
<img class="item-bottom-icon" src="@/assets/icon/icon_classify.png">
<span class="item-bottom-text">{{item.type}}</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'DataModule',
props: {
},
data () {
return {
data: {
name: '协会动态',
isTop: true,
list: [
{
isRecommend: true,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
date: '2020-02-02',
type: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
date: '2020-02-02',
type: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标出',
date: '2020-02-02',
type: '产品创新'
},
]
}
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
@ModuleTop: 30px;
.data-module {
padding-top: @ModuleTop;
.module-top-container {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #135faa;
.module-top-left {
display: flex;
align-items: center;
margin-bottom: -0.5px;
.module-name {
padding-bottom: 2px;
box-sizing: border-box;
font-size: 19px;
color: #222222;
line-height: 26px;
border-bottom: 2.5px solid #135faa;
}
.module-top-btn {
margin-left: 15px;
height: 17px;
line-height: 15px;
border-radius: 10px;
color: #135faa;
font-size: 12px;
padding: 0 5px;
text-align: center;
border: 0.5px solid #135faa;
}
}
.module-more {
font-size: 12px;
color: #999999;
}
}
}
.module-content-container {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.content-item {
padding-top: 14px;
padding-bottom: 10px;
.item-title {
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 25px;
position: relative;
.item-recommend {
position: absolute;
left: 0;
top: 3.5px;
height: 18px;
line-height: 18px;
font-size: 10px;
color: white;
padding: 0 7px;
border-radius: 8px;
background: #ff4038;
text-align: center;
margin-right: 10px;
}
.item-title-content {
font-size: 16px;
color: #222222;
line-height: 25px;
.line-clamp(2);
}
&.item-recommend {
.item-title-content {
text-indent: 50px;
}
}
}
.item-content-bottom {
padding-top: 10px;
display: flex;
justify-content: space-between;
.item-bottom-item {
display: flex;
align-items: center;
@IconSize: 15px;
.item-bottom-icon {
width: @IconSize;
height: @IconSize;
}
.item-bottom-text {
line-height: 16px;
font-size: 12px;
color: #999999;
margin-left: 7px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/home/index.vue
......@@ -13,15 +13,19 @@
<main>
<HomeBanner />
<MenuModule />
<DataModule />
<DataModule />
<DataModule />
</main>
</div>
</template>
<script>
import HomeBanner from './components/HomeBanner'
import MenuModule from './components/MenuModule'
import DataModule from './components/DataModule'
export default {
name: "Home",
components: { HomeBanner, MenuModule },
components: { HomeBanner, MenuModule, DataModule },
data () {
return {};
},
......@@ -44,8 +48,6 @@ export default {
main {
padding: 0 @PaddingSize;
height: 1000px;
overflow-y: scroll;
}
}
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!