Skip to content

Harvey / ydu-lottery-shop-app

转到一个项目
切换导航栏
切换导航栏固定状态
Commit 4a4201e9 由 Harvey
选项

zz

1 个父辈 8a368d4f
内嵌 并排
正在显示 4 个修改的文件 包含 95 行增加 和 26 行删除
src/App.vue
...@@ -14,10 +14,18 @@ ...@@ -14,10 +14,18 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
uni-page { uni-app {
margin: 0 auto;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 2px rgb(0 0 0 / 30%); box-shadow: 0 2px 2px rgb(0 0 0 / 30%);
height: auto; height: auto;
min-height: 100%; min-height: 100%;
} }
/* uni-page {
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 2px rgb(0 0 0 / 30%);
height: auto;
min-height: 100%;
} */
</style> </style>
src/pages/index/index.vue
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template> <template>
<view class="content"> <view class="content">
<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" <swiper class="swiper uni-swiper-height" :indicator-dots="indicatorDots" :autoplay="autoplay"
:duration="duration"> :interval="interval" :duration="duration">
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<image class="banner" mode="aspectFit" src="/static/img/banner01.png"></image> <image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
</swiper-item> </swiper-item>
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<image class="banner" mode="aspectFit" src="/static/img/banner01.png"></image> <image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
</swiper-item> </swiper-item>
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<image class="banner" mode="aspectFit" src="/static/img/banner01.png"></image> <image class="banner" mode="widthFix" src="/static/img/banner01.png"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="menu-content"> <view class="menu-content">
...@@ -19,14 +19,14 @@ ...@@ -19,14 +19,14 @@
<view class="menu-name">{{item.name}}</view> <view class="menu-name">{{item.name}}</view>
</view> </view>
</view> </view>
<view class="seg-line"> <view class="seg-line">
<view class="seg-name">彩店工具</view> <view class="seg-name">彩店工具</view>
</view> </view>
<view class="menu-content"> <view class="menu-content">
<view class="menu-item" v-for="(item,index) in meun_list2" :key="index"> <view class="menu-item" v-for="(item,index) in meun_list2" :key="index">
<image class="menu-img" :src="item.src" :data-nav="item.nav" @click="menuNav"></image> <image class="menu-img" :src="item.src" :data-nav="item.nav" @click="menuNav"></image>
<view class="menu-name">{{item.name}}</view> <view class="menu-name">{{item.name}}</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
...@@ -104,13 +104,63 @@ ...@@ -104,13 +104,63 @@
</script> </script>
<style scoped> <style scoped>
@media screen and (min-width:769px) {
.uni-swiper-height {
height: 248px !important;
}
}
@media screen and (max-width:769px) {
.uni-swiper-height {
height: 248px !important;
}
}
@media screen and (max-width: 600px) {
.uni-swiper-height {
height: 200px !important;
}
}
@media screen and (max-width: 480px) {
.uni-swiper-height {
height: 170px !important;
}
}
@media screen and (max-width: 415px) {
.uni-swiper-height {
height: 155px !important;
}
}
@media screen and (max-width: 412px) {
.uni-swiper-height {
height: 150px !important;
}
}
@media screen and (max-width: 390px) {
.uni-swiper-height {
height: 130px !important;
}
}
@media screen and (max-width: 280px) {
.uni-swiper-height {
height: 100px !important;
}
}
.content { .content {
padding: 0 5px; padding: 0 5px;
font-size: 12px; font-size: 12px;
} }
.swiper { .swiper {
height: 130px; display: block;
height: 150px;
padding: 10px 5px 0px 5px;
} }
.swiper-item {} .swiper-item {}
......
src/pages/tv/info.vue
...@@ -77,9 +77,9 @@ ...@@ -77,9 +77,9 @@
.page-content image { .page-content image {
width: 90%; width: 90%;
margin: 10px 5%; margin: 10px 5% 50px;
} }
.page-tabbar { .page-tabbar {
display: flex; display: flex;
position: fixed; position: fixed;
......
src/pages/tv/list.vue
<template> <template>
<view> <view>
<view class="top-nav"> <view class="top-nav">
<button class="top-nav-btn" :class="{'top-nav-btn-on':sub_module_id == item.value}" v-for="(item,i) in nav" <view class="top-nav-btn" :class="{'top-nav-btn-on':sub_module_id == item.value}" v-for="(item,i) in nav"
:data-v="item.value" @click="navChange" :key="i">{{item.text}}</button> :data-v="item.value" @click="navChange" :key="i">{{item.text}}</view>
</view> </view>
<view class="content"> <view class="content">
<view class='left'> <view class='left'>
...@@ -114,8 +114,16 @@ ...@@ -114,8 +114,16 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.top-nav { .top-nav {
display: flex; display: flex;
padding: 10px; padding: 5px 0px 10px 0px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around;
width: 100%;
position: fixed;
top: 44px;
z-index: 999;
background: #ffffff;
max-width: $sys-max-width;
} }
.top-nav-btn { .top-nav-btn {
...@@ -127,6 +135,8 @@ ...@@ -127,6 +135,8 @@
background-color: rgb(241, 241, 241); background-color: rgb(241, 241, 241);
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
border-radius: 5px;
text-align: center;
} }
.top-nav-btn-on { .top-nav-btn-on {
...@@ -139,7 +149,7 @@ ...@@ -139,7 +149,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
padding: 20px 8px 30px 8px; padding: 110px 8px 30px 8px;
} }
.left, .left,
...@@ -162,8 +172,8 @@ ...@@ -162,8 +172,8 @@
.content .tip { .content .tip {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: #f6fbfe; background: #ffffff;
opacity: 0.8; opacity: 0.9;
width: 100%; width: 100%;
line-height: 50px; line-height: 50px;
...@@ -175,5 +185,6 @@ ...@@ -175,5 +185,6 @@
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
} }
</style> </style>
支持 Markdown 格式
你添加了 0 人 到此讨论。请谨慎行事。
Finish editing this message first!