Skip to content

C
CFFP-HB
Commit a0d7178d by yuzhenWang
Options

做适配

parent 634d4ec9
Showing with 303 additions and 100 deletions
App.vue
...@@ -202,12 +202,78 @@ ...@@ -202,12 +202,78 @@
image{ image{
width: 100%!important; width: 100%!important;
} }
.container{ /* .container{
background-color: rgba(235, 239, 247, 1); background-color: rgba(235, 239, 247, 1);
min-height: 100vh; /* 使用视口高度 */ min-height: 100vh;
height: auto !important; height: auto !important;
height: 100vh; height: 100vh;
} */
/* 全局基础样式 - 移动端优先 */
.container {
background-color: rgba(235, 239, 247, 1);
min-height: 100vh;
height: auto !important;
height: 100vh;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 28rpx;
}
/* 手机端默认样式 (小于768px) */
/* @media (max-width: 767px) {
.container {
}
} */
/* 平板设备 (768px-1023px) */
/* @media (min-width: 768px) and (max-width: 1023px) {
.container {
max-width: 100%;
} */
/* iPad竖屏 */
/* @media (orientation: portrait) {
.container {
max-width: 1000px;
}
} */
/* iPad横屏 */
/* @media (orientation: landscape) {
.container {
max-width: 900px;
}
}
} */
/* 小桌面设备 (1024px-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
.container {
max-width: 800px;
}
} }
/* 大桌面设备 (1280px以上) */
@media (min-width: 1280px) {
.container {
max-width: 800px;
}
}
/* 特殊iPad Pro尺寸适配 */
/* @media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
.container {
max-width: 1100px;
}
} */
.uni-popup .uni-popup__wrapper{ .uni-popup .uni-popup__wrapper{
/* margin: 30rpx!important; */ /* margin: 30rpx!important; */
} }
......
pages/index/index.vue
...@@ -76,13 +76,12 @@ ...@@ -76,13 +76,12 @@
{{item.fileTitle}} {{item.fileTitle}}
</view> </view>
<view class="two"> <view class="two">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text> <text class="price" style="">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text> <text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="productEmpty" v-else> <view class="productEmpty" v-else>
暂无数据 暂无数据
...@@ -442,9 +441,6 @@ ...@@ -442,9 +441,6 @@
icon: 'none' icon: 'none'
}); });
uni.clearStorageSync(); uni.clearStorageSync();
// uni.redirectTo({
// url: '/components/login/login'
// })
uni.navigateTo({ uni.navigateTo({
url: '/components/login/login?from=index' url: '/components/login/login?from=index'
}) })
...@@ -655,34 +651,57 @@ ...@@ -655,34 +651,57 @@
} }
} }
} }
.productList{ /* 基础样式 - 移动端优先 */
.productListBox{ .productList {
padding: 30rpx 40rpx; width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx 30rpx;
display: flex; display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.productListItem{ justify-content: space-between;
width: 48%; gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.top{ box-sizing: border-box;
// background-color: pink;
width: 290rpx; .top {
width: 100%;
position: relative; position: relative;
border-radius: 20rpx;
overflow: hidden; overflow: hidden;
.productDesBox{
padding: 5rpx 10rpx 10rpx 10rpx; /* 确保图片容器有固定宽高比 */
box-sizing: border-box; &::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
bottom: 0%;
background: rgba(0, 0, 0, 0.1);
width: 100%; width: 100%;
border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */ height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
...@@ -690,19 +709,16 @@ ...@@ -690,19 +709,16 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */ white-space: nowrap;
}
.productImg{
border-radius: 20rpx;
display: block;
} }
} }
.bottom{
box-sizing: border-box; .bottom {
padding: 10rpx 15rpx;
text-align: left;
width: 100%; width: 100%;
.one{ box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx; font-size: 27rpx;
margin-bottom: 5rpx; margin-bottom: 5rpx;
display: -webkit-box; display: -webkit-box;
...@@ -710,19 +726,105 @@ ...@@ -710,19 +726,105 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */ white-space: nowrap;
} }
.two{
.two {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
padding-right: 10rpx; align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
} }
} }
} }
} }
/* 平板设备 (768px 以上) */
@media (min-width: 768px) {
.productList {
.productListBox {
max-width: 1200rpx; /* 限制最大宽度 */
margin: 0 auto; /* 居中显示 */
justify-content: flex-start;
.productListItem {
width: 30%; /* 三列布局 */
/* 确保图片和文字比例协调 */
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom{
.two{
.price{
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
} }
.num{
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
}
/* 桌面设备 (1024px 以上) */
// @media (min-width: 1024px) {
// .productList {
// .productListBox {
// .productListItem {
// width: calc(25% - 15rpx); /* 四列布局 */
// max-width: 1000rpx; /* 限制最大宽度 */
// .top {
// &::before {
// padding-top: 100%; /* 恢复1:1宽高比 */
// }
// }
// .bottom {
// .one {
// font-size: 24rpx; /* 略微减小字体 */
// }
// .two {
// justify-content: space-between;
// align-items: center;
// // gap: 5rpx;
// text {
// display: block;
// width: 100%;
// }
// }
// }
// }
// }
// }
// }
// /* 超大桌面设备 (1200px 以上) */
// @media (min-width: 1200px) {
// .productList {
// .productListBox {
// .productListItem {
// width: calc(25% - 16rpx); /* 五列布局 */
// }
// }
// }
// }
.productEmpty{ .productEmpty{
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
width: 100%; width: 100%;
......
pages/orderStatus/orderStatus.vue
...@@ -14,20 +14,7 @@ ...@@ -14,20 +14,7 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 精选课程 -->
<!-- <view class="courlistBox">
<view class="course_content">
<view class="tag">
<h4>推荐产品</h4>
<view @click="goToCourselist()">更多<text class="iconfont icon-youjiantou"></text></view>
</view>
<view class="ulBox" v-if="cffpCourseInfos.length>0">
<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" ></course-item>
</view>
</view>
</view>
</view> -->
<view class="productBox"> <view class="productBox">
<view class="productTitle"> <view class="productTitle">
<view class="titleTxt"> <view class="titleTxt">
...@@ -49,13 +36,12 @@ ...@@ -49,13 +36,12 @@
{{item.fileTitle}} {{item.fileTitle}}
</view> </view>
<view class="two"> <view class="two">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text> <text class="price" style="">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text> <text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="productEmpty" v-else> <view class="productEmpty" v-else>
暂无数据 暂无数据
...@@ -201,34 +187,57 @@ ...@@ -201,34 +187,57 @@
} }
} }
} }
.productList{ /* 基础样式 - 移动端优先 */
.productListBox{ .productList {
padding: 30rpx 40rpx; width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx 30rpx;
display: flex; display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.productListItem{ justify-content: space-between;
width: 48%; gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: flex; display: flex;
align-items: center;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
.top{ box-sizing: border-box;
// background-color: pink;
width: 290rpx; .top {
width: 100%;
position: relative; position: relative;
border-radius: 20rpx;
overflow: hidden; overflow: hidden;
.productDesBox{
padding: 5rpx 10rpx 10rpx 10rpx; /* 确保图片容器有固定宽高比 */
box-sizing: border-box; &::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute; position: absolute;
top: 0;
left: 0; left: 0;
bottom: 0%;
background: rgba(0, 0, 0, 0.1);
width: 100%; width: 100%;
border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */ height: 100%;
object-fit: cover;
display: block;
}
.productDesBox {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 0 0 20rpx 20rpx;
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
display: -webkit-box; display: -webkit-box;
...@@ -236,19 +245,16 @@ ...@@ -236,19 +245,16 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */ white-space: nowrap;
}
.productImg{
border-radius: 20rpx;
display: block;
} }
} }
.bottom{
box-sizing: border-box; .bottom {
padding: 10rpx 15rpx;
text-align: left;
width: 100%; width: 100%;
.one{ box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx; font-size: 27rpx;
margin-bottom: 5rpx; margin-bottom: 5rpx;
display: -webkit-box; display: -webkit-box;
...@@ -256,18 +262,57 @@ ...@@ -256,18 +262,57 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */ white-space: nowrap;
} }
.two{
.two {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
padding-right: 10rpx; align-items: center;
.price{
font-size: 28rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 24rpx;
color: rgba(166, 166, 166, 1);
}
}
} }
} }
} }
} }
/* 平板设备 (768px 以上) */
@media (min-width: 768px) {
.productList {
.productListBox {
max-width: 1200rpx; /* 限制最大宽度 */
margin: 0 auto; /* 居中显示 */
justify-content: flex-start;
.productListItem {
width: 30%; /* 三列布局 */
/* 确保图片和文字比例协调 */
.top {
&::before {
// padding-top: 120%; /* 略微调整宽高比 */
}
}
.bottom{
.two{
.price{
font-size: 23rpx;
color: rgba(32, 39, 155, 1);
}
.num{
font-size: 20rpx;
color: rgba(166, 166, 166, 1);
}
}
}
}
}
}
} }
.productEmpty{ .productEmpty{
color: rgba(166, 166, 166, 1); color: rgba(166, 166, 166, 1);
......
pages/personalCenter/accountoperation/aboutcffp.vue
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
companyType : companyInfo.companyType, companyType : companyInfo.companyType,
companyFullName : companyInfo.companyFullName, companyFullName : companyInfo.companyFullName,
appName : companyInfo.appName, appName : companyInfo.appName,
companyLogo : '../../../static/myteam/logo.png' companyLogo : '../../../static/logo2.png'
} }
}, },
created() { created() {
...@@ -56,14 +56,14 @@ ...@@ -56,14 +56,14 @@
if(this.companyType == '1'){ if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png'; this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){ }else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png' this.companyLogo='../../../static/logo2.png'
} }
}, },
onShow() { onShow() {
if(this.companyType == '1'){ if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png'; this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){ }else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png' this.companyLogo='../../../static/logo2.png'
} }
}, },
methods:{ methods:{
...@@ -116,19 +116,10 @@ ...@@ -116,19 +116,10 @@
text-align: center; text-align: center;
padding: 50rpx; padding: 50rpx;
} }
// .header-box{
// height: 300rpx;
// margin: 0 50rpx;
// display: flex;
// border-bottom: 1px solid #E6E6E6;
// }
.header-box-img{ .header-box-img{
width: 124rpx; width: 124rpx;
height: 124rpx; height: 124rpx;
margin: 90rpx auto 45rpx auto; margin: 90rpx auto 45rpx auto;
//background: url({{this.companyLogo}});
//background: url('../../../static/myteam/logo.png');
background-size: auto 100%; background-size: auto 100%;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment