Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit f98841fc by amateur
Options

添加首页今日热点模块

1 parent 514c6962
Inline Side-by-side
Showing 6 changed files with 127 additions and 28 deletions
src/assets/css/sprite.less
...@@ -6,42 +6,43 @@ ...@@ -6,42 +6,43 @@
.icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; } .icon-bg-member-result { width: 1212px; height: 717px; background-position: 0px 0px; }
.icon-bg-member { width: 828px; height: 406px; background-position: -848px -737px; } .icon-bg-member { width: 828px; height: 406px; background-position: -848px -737px; }
.icon-bg-mine { width: 828px; height: 340px; background-position: -848px -1169px; } .icon-bg-mine { width: 828px; height: 340px; background-position: -848px -1169px; }
.icon-center-about { width: 36px; height: 36px; background-position: -1974px -981px; } .icon-center-about { width: 36px; height: 36px; background-position: -1762px -1075px; }
.icon-center-collect { width: 36px; height: 36px; background-position: -1762px -1055px; } .icon-center-collect { width: 36px; height: 36px; background-position: -1818px -1075px; }
.icon-center-feedback { width: 36px; height: 36px; background-position: -1818px -1055px; } .icon-center-feedback { width: 36px; height: 36px; background-position: -1874px -1075px; }
.icon-center-message { width: 36px; height: 36px; background-position: -1874px -1055px; } .icon-center-message { width: 36px; height: 36px; background-position: -1930px -1075px; }
.icon-center-question { width: 36px; height: 36px; background-position: -1930px -1055px; } .icon-center-question { width: 36px; height: 36px; background-position: -1986px -1075px; }
.icon-center-setting { width: 36px; height: 36px; background-position: -1986px -1055px; } .icon-center-setting { width: 36px; height: 36px; background-position: -1696px -1169px; }
.icon-center-study { width: 36px; height: 36px; background-position: -1696px -1169px; } .icon-center-study { width: 36px; height: 36px; background-position: -1752px -1169px; }
.icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; } .icon-change-member { width: 90px; height: 90px; background-position: -1514px -526px; }
.icon-change-membership { width: 90px; height: 90px; background-position: -1624px -526px; } .icon-change-membership { width: 90px; height: 90px; background-position: -1624px -526px; }
.icon-change-name { width: 90px; height: 90px; background-position: -1734px -526px; } .icon-change-name { width: 90px; height: 90px; background-position: -1734px -526px; }
.icon-change-representive { width: 90px; height: 90px; background-position: -1844px -526px; } .icon-change-representive { width: 90px; height: 90px; background-position: -1844px -526px; }
.icon-email { width: 36px; height: 36px; background-position: -1752px -1169px; } .icon-email { width: 36px; height: 36px; background-position: -1808px -1169px; }
.icon-empty { width: 36px; height: 36px; background-position: -1808px -1169px; } .icon-empty { width: 36px; height: 36px; background-position: -1864px -1169px; }
.icon-filter { width: 44px; height: 50px; background-position: -1910px -981px; } .icon-filter { width: 44px; height: 50px; background-position: -2004px -981px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; } .icon-icon-arrow-right { width: 10px; height: 18px; background-position: -2050px -737px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -2030px -981px; } .icon-icon-classify { width: 30px; height: 30px; background-position: -2028px -1225px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -1972px -1225px; } .icon-icon-clock { width: 30px; height: 30px; background-position: -1696px -1281px; }
.icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; } .icon-join-member { width: 90px; height: 90px; background-position: -1954px -526px; }
.icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; } .icon-logo-2 { width: 118px; height: 112px; background-position: -1376px -526px; }
.icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; } .icon-logo { width: 224px; height: 224px; background-position: -1696px -737px; }
.icon-message { width: 50px; height: 50px; background-position: -1770px -981px; } .icon-message { width: 50px; height: 50px; background-position: -1864px -981px; }
.icon-more { width: 10px; height: 18px; background-position: -2050px -775px; } .icon-more { width: 10px; height: 18px; background-position: -2050px -775px; }
.icon-password { width: 36px; height: 36px; background-position: -1864px -1169px; } .icon-password { width: 36px; height: 36px; background-position: -1920px -1169px; }
.icon-pdf-icon { width: 46px; height: 28px; background-position: -1297px -670px; } .icon-pdf-icon { width: 46px; height: 28px; background-position: -1297px -670px; }
.icon-pdf { width: 46px; height: 60px; background-position: -1696px -1055px; } .icon-pdf { width: 46px; height: 60px; background-position: -1696px -1075px; }
.icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; } .icon-photo-default { width: 124px; height: 124px; background-position: -1232px -526px; }
.icon-progress-act { width: 36px; height: 36px; background-position: -1920px -1169px; } .icon-progress-act { width: 36px; height: 36px; background-position: -1976px -1169px; }
.icon-progress-normal { width: 36px; height: 36px; background-position: -1976px -1169px; } .icon-progress-normal { width: 36px; height: 36px; background-position: -1696px -1225px; }
.icon-question-icon { width: 36px; height: 36px; background-position: -1696px -1225px; } .icon-question-icon { width: 36px; height: 36px; background-position: -1752px -1225px; }
.icon-quit-member { width: 90px; height: 90px; background-position: -1940px -737px; } .icon-quit-member { width: 90px; height: 90px; background-position: -1940px -737px; }
.icon-shtyxydm { width: 54px; height: 54px; background-position: -1696px -981px; } .icon-shtyxydm { width: 54px; height: 54px; background-position: -1790px -981px; }
.icon-tel { width: 36px; height: 36px; background-position: -1752px -1225px; } .icon-tel { width: 36px; height: 36px; background-position: -1808px -1225px; }
.icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; } .icon-time-update { width: 45px; height: 45px; background-position: -1232px -670px; }
.icon-trash { width: 50px; height: 50px; background-position: -1840px -981px; } .icon-trash { width: 50px; height: 50px; background-position: -1934px -981px; }
.icon-up-arrow { width: 20px; height: 14px; background-position: -1363px -670px; } .icon-up-arrow { width: 20px; height: 14px; background-position: -1363px -670px; }
.icon-user-question { width: 32px; height: 36px; background-position: -1920px -1225px; }
.icon-user { width: 36px; height: 36px; background-position: -1808px -1225px; }
.icon-verification { width: 36px; height: 36px; background-position: -1864px -1225px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
\ No newline at end of file \ No newline at end of file
.icon-user-question { width: 32px; height: 36px; background-position: -1976px -1225px; }
.icon-user { width: 36px; height: 36px; background-position: -1864px -1225px; }
.icon-verification { width: 36px; height: 36px; background-position: -1920px -1225px; }
.icon-wechat { width: 80px; height: 78px; background-position: -1940px -847px; }
.icon-icon-today-hot { width: 74px; height: 74px; background-position: -1696px -981px; }
\ No newline at end of file \ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

716 KB | W: | H:

src/assets/images/sprite.png

724 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/utils/vant-ui.js
...@@ -32,7 +32,8 @@ import { ...@@ -32,7 +32,8 @@ import {
IndexBar, IndexBar,
IndexAnchor, IndexAnchor,
Sidebar, Sidebar,
SidebarItem SidebarItem,
NoticeBar
} from 'vant' } from 'vant'
import NafmHeader from '@/components/NafmHeader' import NafmHeader from '@/components/NafmHeader'
...@@ -75,7 +76,8 @@ import FooterBottom from '@/components/FooterBottom' ...@@ -75,7 +76,8 @@ import FooterBottom from '@/components/FooterBottom'
IndexBar, IndexBar,
IndexAnchor, IndexAnchor,
Sidebar, Sidebar,
SidebarItem SidebarItem,
NoticeBar
].forEach(item => Vue.use(item)) ].forEach(item => Vue.use(item))
// 先预制，后期做统一调整 // 先预制，后期做统一调整
......
src/views/home/components/HotScrollBar.vue 0 → 100644
<template>
<van-notice-bar class="hot-scroll-bar" :scrollable="false">
<template #left-icon>
<img class="title-icon" src="@/assets/icon/icon_today_hot.png" alt="" />
<span class="line"></span>
</template>
<van-swipe
vertical
class="notice-swipe"
:autoplay="3000"
:show-indicators="false"
>
<van-swipe-item v-for="(item, idx) in data.scrollBarVOS" :key="idx">
<div class="content-main">
<span class="tag" :style="tagStyle(item)">{{ item.scrollTag }}</span>
<span class="content">{{ item.scrollTitle }}</span>
</div>
</van-swipe-item>
</van-swipe>
</van-notice-bar>
</template>
<script>
export default {
name: 'HotScrollBar',
props: {
data: {
type: Object,
default: () => { return {} }
}
},
methods: {
tagStyle (item) {
const { backgroundColor = 'red' } = item || {}
return { backgroundColor: 'red' }
}
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
.hot-scroll-bar {
margin-top: 20px;
height: 45px;
display: flex;
align-items: center;
background: white;
border-radius: 8px;
border: 2px solid rgba(240, 241, 243, 1);
padding: 0 10px;
.title-icon {
width: 35px;
height: 35px;
}
.line {
width: 1px;
height: 20px;
background: #000000;
opacity: 0.1;
margin-left: 11px;
}
.notice-swipe {
height: 45px;
line-height: 45px;
padding-left: 8px;
}
.content-main {
width: 100%;
display: flex;
align-items: center;
.tag {
color: white;
border-radius: 4px;
padding: 0 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
height: 20px;
}
.content {
height: 100%;
color: #333333;
font-size: 16px;
margin-left: 5px;
.line-clamp(1);
}
}
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/home/index.vue
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<main> <main>
<HomeBanner :data="HomeData" /> <HomeBanner :data="HomeData" />
<MenuModule :data="HomeData" /> <MenuModule :data="HomeData" />
<HotScrollBar :data="HomeData" />
<DataModule <DataModule
v-for="(item, idx) in modules" v-for="(item, idx) in modules"
:key="idx" :key="idx"
...@@ -33,10 +34,11 @@ import { mapState } from "vuex"; ...@@ -33,10 +34,11 @@ import { mapState } from "vuex";
import SearchInput from '@/components/SearchInput' import SearchInput from '@/components/SearchInput'
import HomeBanner from './components/HomeBanner' import HomeBanner from './components/HomeBanner'
import MenuModule from './components/MenuModule' import MenuModule from './components/MenuModule'
import HotScrollBar from './components/HotScrollBar'
import DataModule from '@/components/HomeDataListModule' import DataModule from '@/components/HomeDataListModule'
export default { export default {
name: "Home", name: "Home",
components: { HomeBanner, MenuModule, DataModule, SearchInput }, components: { HomeBanner, MenuModule, HotScrollBar, DataModule, SearchInput },
data () { data () {
const datas = [ const datas = [
{ {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!