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 @@
image{
width: 100%!important;
}
.container{
/* .container{
background-color: rgba(235, 239, 247, 1);
min-height: 100vh; /* 使用视口高度 */
min-height: 100vh;
height: auto !important;
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{
/* margin: 30rpx!important; */
}
......
pages/index/index.vue
......@@ -76,13 +76,12 @@
{{item.fileTitle}}
</view>
<view class="two">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text>
<text class="price" style="">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="productEmpty" v-else>
暂无数据
......@@ -442,9 +441,6 @@
icon: 'none'
});
uni.clearStorageSync();
// uni.redirectTo({
// url: '/components/login/login'
// })
uni.navigateTo({
url: '/components/login/login?from=index'
})
......@@ -655,34 +651,57 @@
}
}
}
.productList{
.productListBox{
padding: 30rpx 40rpx;
/* 基础样式 - 移动端优先 */
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.productListItem{
width: 48%;
justify-content: space-between;
gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
.top{
// background-color: pink;
width: 290rpx;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
.productDesBox{
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
bottom: 0%;
background: rgba(0, 0, 0, 0.1);
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;
color: #fff;
display: -webkit-box;
......@@ -690,19 +709,16 @@
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
}
.productImg{
border-radius: 20rpx;
display: block;
white-space: nowrap;
}
}
.bottom{
box-sizing: border-box;
padding: 10rpx 15rpx;
text-align: left;
.bottom {
width: 100%;
.one{
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
......@@ -710,19 +726,105 @@
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
white-space: nowrap;
}
.two{
.two {
display: flex;
align-items: center;
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{
color: rgba(166, 166, 166, 1);
width: 100%;
......
pages/orderStatus/orderStatus.vue
......@@ -14,20 +14,7 @@
</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="productTitle">
<view class="titleTxt">
......@@ -49,13 +36,12 @@
{{item.fileTitle}}
</view>
<view class="two">
<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text>
<text class="price" style="">￥{{item.coursePrice}}</text>
<text v-if="Number(item.salesNumber)>0" class="num" >已售{{item.salesNumber}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="productEmpty" v-else>
暂无数据
......@@ -201,34 +187,57 @@
}
}
}
.productList{
.productListBox{
padding: 30rpx 40rpx;
/* 基础样式 - 移动端优先 */
.productList {
width: 100%;
box-sizing: border-box;
.productListBox {
padding: 30rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.productListItem{
width: 48%;
justify-content: space-between;
gap: 30rpx;
.productListItem {
width: calc(50% - 20rpx); /* 两列布局，考虑间隙 */
margin-bottom: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
.top{
// background-color: pink;
width: 290rpx;
box-sizing: border-box;
.top {
width: 100%;
position: relative;
border-radius: 20rpx;
overflow: hidden;
.productDesBox{
padding: 5rpx 10rpx 10rpx 10rpx;
box-sizing: border-box;
/* 确保图片容器有固定宽高比 */
&::before {
content: "";
display: block;
padding-top: 100%; /* 1:1 宽高比 */
}
.productImg {
position: absolute;
top: 0;
left: 0;
bottom: 0%;
background: rgba(0, 0, 0, 0.1);
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;
color: #fff;
display: -webkit-box;
......@@ -236,19 +245,16 @@
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
}
.productImg{
border-radius: 20rpx;
display: block;
white-space: nowrap;
}
}
.bottom{
box-sizing: border-box;
padding: 10rpx 15rpx;
text-align: left;
.bottom {
width: 100%;
.one{
box-sizing: border-box;
padding: 10rpx 0;
.one {
font-size: 27rpx;
margin-bottom: 5rpx;
display: -webkit-box;
......@@ -256,18 +262,57 @@
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 确保不会换行 */
white-space: nowrap;
}
.two{
.two {
display: flex;
align-items: center;
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{
color: rgba(166, 166, 166, 1);
......
pages/personalCenter/accountoperation/aboutcffp.vue
......@@ -43,7 +43,7 @@
companyType : companyInfo.companyType,
companyFullName : companyInfo.companyFullName,
appName : companyInfo.appName,
companyLogo : '../../../static/myteam/logo.png'
companyLogo : '../../../static/logo2.png'
}
},
created() {
......@@ -56,14 +56,14 @@
if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png'
this.companyLogo='../../../static/logo2.png'
}
},
onShow() {
if(this.companyType == '1'){
this.companyLogo='../../../static/myteam/Group1633.png';
}else if(this.companyType == '2'){
this.companyLogo='../../../static/myteam/logo.png'
this.companyLogo='../../../static/logo2.png'
}
},
methods:{
......@@ -116,19 +116,10 @@
text-align: center;
padding: 50rpx;
}
// .header-box{
// height: 300rpx;
// margin: 0 50rpx;
// display: flex;
// border-bottom: 1px solid #E6E6E6;
// }
.header-box-img{
width: 124rpx;
height: 124rpx;
margin: 90rpx auto 45rpx auto;
//background: url({{this.companyLogo}});
//background: url('../../../static/myteam/logo.png');
background-size: auto 100%;
}
</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