Skip to content

C
CFFP-HB
Commit a0d7178d by yuzhenWang
Options

做适配

parent 634d4ec9
Showing with 403 additions and 200 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
...@@ -62,27 +62,26 @@ ...@@ -62,27 +62,26 @@
<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text> <text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
</view> </view>
</view> </view>
<view class="productList" v-if="cffpCourseInfos.length>0"> <view class="productList" v-if="cffpCourseInfos.length>0">
<view class="productListBox"> <view class="productListBox">
<view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)"> <view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="top"> <view class="top">
<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image> <image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
<view class="productDesBox"> <view class="productDesBox">
{{item.fileSynopsis}} {{item.fileSynopsis}}
</view> </view>
</view> </view>
<view class="bottom" style="text-align: left !important;"> <view class="bottom" style="text-align: left !important;">
<view class="one"> <view class="one">
{{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,74 +651,180 @@ ...@@ -655,74 +651,180 @@
} }
} }
} }
.productList{ /* 基础样式 - 移动端优先 */
.productListBox{ .productList {
padding: 30rpx 40rpx; width: 100%;
display: flex; box-sizing: border-box;
align-items: center;
justify-content: space-between; .productListBox {
flex-wrap: wrap; padding: 30rpx 30rpx;
.productListItem{ display: flex;
width: 48%; flex-wrap: wrap;
margin-bottom: 20rpx; justify-content: space-between;
display: flex; gap: 30rpx;
align-items: center; .productListItem {
flex-direction: column; width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
overflow: hidden; margin-bottom: 20rpx;
.top{ display: flex;
// background-color: pink; flex-direction: column;
width: 290rpx; overflow: hidden;
position: relative; box-sizing: border-box;
overflow: hidden;
.productDesBox{ .top {
padding: 5rpx 10rpx 10rpx 10rpx; width: 100%;
box-sizing: border-box; position: relative;
position: absolute; border-radius: 20rpx;
left: 0; overflow: hidden;
bottom: 0%;
background: rgba(0, 0, 0, 0.1); /* 确保图片容器有固定宽高比 */
width: 100%; &::before {
border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */ content: "";
font-size: 24rpx; display: block;
color: #fff; padding-top: 100%; /* 1:1 宽高比 */
display: -webkit-box; }
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; .productImg {
overflow: hidden; position: absolute;
text-overflow: ellipsis; top: 0;
white-space: nowrap; /* 确保不会换行 */ left: 0;
} width: 100%;
.productImg{ height: 100%;
border-radius: 20rpx; object-fit: cover;
display: block; display: block;
} }
}
.bottom{ .productDesBox {
box-sizing: border-box; position: absolute;
padding: 10rpx 15rpx; left: 0;
text-align: left; bottom: 0;
width: 100%; width: 100%;
.one{ padding: 5rpx 10rpx 10rpx 10rpx;
font-size: 27rpx; box-sizing: border-box;
margin-bottom: 5rpx; background: rgba(0, 0, 0, 0.1);
display: -webkit-box; border-radius: 0 0 20rpx 20rpx;
-webkit-line-clamp: 1; font-size: 24rpx;
-webkit-box-orient: vertical; color: #fff;
overflow: hidden; display: -webkit-box;
text-overflow: ellipsis; -webkit-line-clamp: 1;
white-space: nowrap; /* 确保不会换行 */ -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
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);
} }
.two{ .num{
display: flex; font-size: 20rpx;
align-items: center; color: rgba(166, 166, 166, 1);
justify-content: space-between;
padding-right: 10rpx;
} }
} }
} }
} }
}
}
} }
/* 桌面设备 (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">
...@@ -35,27 +22,26 @@ ...@@ -35,27 +22,26 @@
<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text> <text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
</view> </view>
</view> </view>
<view class="productList" v-if="cffpCourseInfos.length>0"> <view class="productList" v-if="cffpCourseInfos.length>0">
<view class="productListBox"> <view class="productListBox">
<view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)"> <view class="productListItem" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="top"> <view class="top">
<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image> <image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
<view class="productDesBox"> <view class="productDesBox">
{{item.fileSynopsis}} {{item.fileSynopsis}}
</view> </view>
</view> </view>
<view class="bottom" style="text-align: left !important;"> <view class="bottom" style="text-align: left !important;">
<view class="one"> <view class="one">
{{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,73 +187,132 @@ ...@@ -201,73 +187,132 @@
} }
} }
} }
.productList{ /* 基础样式 - 移动端优先 */
.productListBox{ .productList {
padding: 30rpx 40rpx; width: 100%;
display: flex; box-sizing: border-box;
align-items: center;
justify-content: space-between; .productListBox {
flex-wrap: wrap; padding: 30rpx 30rpx;
.productListItem{ display: flex;
width: 48%; flex-wrap: wrap;
margin-bottom: 20rpx; justify-content: space-between;
display: flex; gap: 30rpx;
align-items: center; .productListItem {
flex-direction: column; width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
overflow: hidden; margin-bottom: 20rpx;
.top{ display: flex;
// background-color: pink; flex-direction: column;
width: 290rpx; overflow: hidden;
position: relative; box-sizing: border-box;
overflow: hidden;
.productDesBox{ .top {
padding: 5rpx 10rpx 10rpx 10rpx; width: 100%;
box-sizing: border-box; position: relative;
position: absolute; border-radius: 20rpx;
left: 0; overflow: hidden;
bottom: 0%;
background: rgba(0, 0, 0, 0.1); /* 确保图片容器有固定宽高比 */
width: 100%; &::before {
border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */ content: "";
font-size: 24rpx; display: block;
color: #fff; padding-top: 100%; /* 1:1 宽高比 */
display: -webkit-box; }
-webkit-line-clamp: 1;
-webkit-box-orient: vertical; .productImg {
overflow: hidden; position: absolute;
text-overflow: ellipsis; top: 0;
white-space: nowrap; /* 确保不会换行 */ left: 0;
} width: 100%;
.productImg{ height: 100%;
border-radius: 20rpx; object-fit: cover;
display: block; display: block;
} }
}
.bottom{ .productDesBox {
box-sizing: border-box; position: absolute;
padding: 10rpx 15rpx; left: 0;
text-align: left; bottom: 0;
width: 100%; width: 100%;
.one{ padding: 5rpx 10rpx 10rpx 10rpx;
font-size: 27rpx; box-sizing: border-box;
margin-bottom: 5rpx; background: rgba(0, 0, 0, 0.1);
display: -webkit-box; border-radius: 0 0 20rpx 20rpx;
-webkit-line-clamp: 1; font-size: 24rpx;
-webkit-box-orient: vertical; color: #fff;
overflow: hidden; display: -webkit-box;
text-overflow: ellipsis; -webkit-line-clamp: 1;
white-space: nowrap; /* 确保不会换行 */ -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.bottom {
width: 100%;
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.two {
display: flex;
justify-content: space-between;
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);
} }
.two{ .num{
display: flex; font-size: 20rpx;
align-items: center; color: rgba(166, 166, 166, 1);
justify-content: space-between;
padding-right: 10rpx;
} }
} }
} }
} }
}
}
} }
.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