Tuzki
/
CjyTravel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
lu_quan_dev
han 11 months ago
parent 71716cd858
commit 3a6c241579
4 changed files with 111 additions and 300 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      pages/index/index.vue
  2. 102
      static/css/common.scss
  3. 292
      subPageA/method/methodlist/methodlist.css
  4. 11
      subPageA/method/methodlist/methodlist.vue

6
pages/index/index.vue
Unescape View File

@ -84,7 +84,7 @@
</view>
</view>
<view class="w_20" hover-class="checkActive">
<view class="kua_nav" @click="goQuanyi">
<view class="kua_nav" @click="goToPages('Audiovisual')">
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-nav-15.png" class="at_size_2"></image>
<view class="at_t">影音世界</view>
</view>
@ -705,6 +705,10 @@
icon: "none",
duration: 2000,
});
}else if (type == "Audiovisual") {
uni.navigateTo({
url: "/subPageA/Audiovisual/AudiovisualList/AudiovisualList",
});
}
},
goToDetail: function(type, guid, region) {

102
static/css/common.scss
Unescape View File

@ -36,10 +36,110 @@ page {
.container-fluid {
margin: 0 24rpx;
}
/* 页面 */
.v-pages-bg.bgcolor {
background: #f5f6fa;
}
.v-pages {
&.tab {
padding-top: 110rpx;
}
}
/* 页面标签切换 */
.v-tab-list {
position: fixed;
top: 0;
z-index: 99;
width: 100%;
box-sizing: border-box;
padding: 24rpx 24rpx 20rpx 24rpx;
background-color: #fff;
.tab-item {
position: relative;
text-align: center;
font-size: 30rpx;
color: #4d4d4d;
&.active {
color: #0983ff;
&::after {
content: '';
position: absolute;
left: 50%;
bottom: -12rpx;
width: 60rpx;
height: 5rpx;
transform: translate(-50%, 0);
border-radius: 5rpx;
background-color: #0983ff;
}
}
}
}
/* 页面 推荐 */
.v-pages-suggest {
.list_item {
.item_title {
margin-top: 8rpx;
height: 40rpx;
line-height: 40rpx;
color: #333333;
font-size: 28rpx;
font-weight: bold;
}
}
&.video {
margin-left: -24rpx;
.list_item {
position: relative;
flex: 0 0 440rpx;
width: 440rpx;
height: 320rpx;
overflow: hidden;
margin-left: 24rpx;
.item_image {
position: relative;
width: 440rpx;
height: 280rpx;
border-radius: 16rpx;
overflow: hidden;
&::after {
content: '';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60rpx;
height: 60rpx;
background-color: #0983ff;
}
.img {
width: 100%;
}
}
}
}
&.audio {
margin-left: -24rpx;
.list_item {
flex: 0 0 272rpx;
width: 272rpx;
height: 320rpx;
overflow: hidden;
margin-left: 24rpx;
.item_image {
width: 272rpx;
height: 272rpx;
border-radius: 16rpx;
overflow: hidden;
.img {
width: 100%;
}
}
}
}
}
// 页面 标题
.v-page-title {

292
subPageA/method/methodlist/methodlist.css
Unescape View File

@ -1,292 +0,0 @@
page {
height: 100%;
overflow-y: hidden;
position: relative;
}
.search-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: #fff;
z-index: 3;
}
.search-tip-bar {
display: flex;
height: 60rpx;
justify-content: space-between;
border-bottom: 2rpx solid #e5e5e5;
}
.search-tip-item {
width: 33.333333%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 28rpx;
}
.search-tip-item:after {
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin: -2rpx 0 0 6rpx;
border-top: 8rpx solid #666;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
}
.search-tip-item.active:after {
border-bottom: 8rpx solid #666;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 0;
}
.scroll-view {
position: absolute;
top: 80rpx;
right: 0;
left: 0;
bottom: 0;
z-index:4;
}
.list-container {
width: 100%;
background: #fff;
}
.list-wrap {
width: 100%;
padding: 0 30rpx;
box-sizing: border-box;
}
.list-item {
display: flex;
padding: 30rpx 0;
border-bottom: 1px solid #e1e1e1;
}
.list-item .item-pic {
width: 280rpx;
height: 180rpx;
border-radius: 6rpx;
}
.list-item .item-info {
flex: 1;
margin-left: 20rpx;
}
.list-item .item-info .title {
max-height: 76rpx;
line-height: 38rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 32rpx;
}
.list-item .item-info .attr .tip {
display: inline-block;
height: 32rpx;
border: 1rpx solid #15D5AE;
font-size: 20rpx;
color: #15D5AE;
line-height: 32rpx;
margin-right: 12rpx;
padding: 0 5rpx;
border-radius: 5rpx;
}
.list-item .item-info .data {
display: flex;
margin-top: 10rpx;
justify-content: space-between;
}
.list-item .item-info .data .sell,.list-item .item-info .data .myd {
font-size: 28rpx;
color: #999;
height: 120rpx;
padding: 0 5rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-top: 5rpx;
line-height: 40rpx;
}
.list-item .item-info .data .price {
color: #646464;
font-size: 24rpx;
}
.list-item .item-info .data .price .num {
color: #ff6c00;
font-size: 32rpx;
}
.sort-page {
position: absolute;
top: 62rpx;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,.5);
}
.sort-group {
background: #fff;
}
.sort-item {
color: #666;
height: 78rpx;
line-height: 78rpx;
padding: 0 30rpx;
position: relative;
font-size: 28rpx;
border-bottom: 2rpx solid #e5e5e5;
}
.sort-item-active {
color: #eb5e18;
}
.sort-item-active:after {
content: "";
display: inline-block;
width: 22rpx;
height: 18rpx;
position: absolute;
top: 50%;
right: 20rpx;
margin-top: -14rpx;
background: url("") center no-repeat;
background-size: contain;
}
.filter-page {
position: absolute;
top: 62rpx;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: #fff;
}
.filter-box {
display: -webkit-box;
position: absolute;
top: 0;
right: 0;
bottom: 108rpx;
left: 0;
}
.filter-hd {
width: 220rpx;
height: 100%;
background: #f2f6f9;
}
.filter-hd-item {
height: 80rpx;
line-height: 80rpx;
padding: 0 20rpx;
position: relative;
font-size: 28rpx;
}
.filter-hd-item-active,.filter-bd-item-active {
color: #eb5e18;
background: #fff;
}
.filter-bd-item-active:after {
content: "";
display: inline-block;
width: 22rpx;
height: 18rpx;
position: absolute;
top: 50%;
right: 20rpx;
margin-top: -14rpx;
background: url("") center no-repeat;
background-size: contain;
}
.filter-bd {
height: 100%;
-webkit-box-flex: 1;
padding: 0 20rpx;
}
.filter-bd-item {
height: 78rpx;
line-height: 78rpx;
padding: 0 20rpx;
position: relative;
font-size: 28rpx;
border-bottom: 2rpx solid #e5e5e5;
}
.control-bar-block {
display: -webkit-box;
height: 80rpx;
padding: 14rpx 20rpx;
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: #fafafa;
}
.control-back-btn {
color: #8a8a8a;
width: 170rpx;
height: 76rpx;
line-height: 76rpx;
margin-right: 20rpx;
text-align: center;
border: 2rpx solid #b8b8b8;
border-radius: 10rpx;
font-size: 26rpx;
}
.control-confirm-btn {
color: #fff;
height: 80rpx;
line-height: 80rpx;
text-align: center;
-webkit-box-flex: 1;
font-size: 30rpx;
border-radius: 10rpx;
background: #eb5e18;
}
.goTop {
height: 80rpx;
width: 80rpx;
position: fixed;
bottom: 50rpx;
right: 30rpx;
border-radius: 50%;
}

11
subPageA/method/methodlist/methodlist.vue
Unescape View File

@ -24,9 +24,9 @@
<view class="inner"><text class="text">文旅攻略</text></view>
</view>
<view class="v-method-list">
<view class="method-list-item row" v-for="(item,index) in method_list" :key="index">
<view class="method-list-item row" v-for="(item,index) in data_list" :key="index">
<view class="item_image">
<image class="slide-image" :src="item.img" mode="widthFix"></image>
<image class="img" :src="item.img" mode="widthFix"></image>
</view>
<view class="item_content col">
<view class="title">{{item.title}}</view>
@ -34,7 +34,6 @@
</view>
</view>
</view>
</view>
</template>
@ -51,7 +50,7 @@
pic_list: undefined,
class_list: undefined,
method_list: undefined,
data_list: undefined,
};
},
onLoad(option) {
@ -91,7 +90,7 @@
},
// 获取列表数据
getListData() {
this.method_list = [{
this.data_list = [{
img: "http://119.249.56.5:8083/upload/images/573a5c48f2bf4771ae0004b029241836.png",
title: "这么近，那么美，周末到河北",
dec: "一处集历史人文和自然风光为一体的名山古寨,是广大游客登山健身、休闲娱乐的首选之地"
@ -182,7 +181,7 @@
margin-right: 24rpx;
overflow: hidden;
image {
.img{
width: 250rpx;
}
}

Write Preview
Loading…
Cancel
Save