Browse Source

feat: 样式调整;

fox
Fox-33 1 week ago
parent
commit
f9c63ffaa7
2 changed files with 19 additions and 16 deletions
  1. +10
    -8
      pages_order/thesis/index.vue
  2. +9
    -8
      pages_order/thesis/indexTwo.vue

+ 10
- 8
pages_order/thesis/index.vue View File

@ -6,7 +6,7 @@
<view class="cover-image" :style="{ height: coverImageHeight }"> <view class="cover-image" :style="{ height: coverImageHeight }">
<image class="img" :src="details.image" mode="scaleToFill" ></image> <image class="img" :src="details.image" mode="scaleToFill" ></image>
<view class="shadow"></view>
<view class="shadow" :style="{ height: coverImageShadowHeight }"></view>
</view> </view>
<view class="page-title"> <view class="page-title">
<view v-if="details.process || (details.educationProcessList && details.educationProcessList.length)">{{ details.processTitle || '发表全流程辅导' }}</view> <view v-if="details.process || (details.educationProcessList && details.educationProcessList.length)">{{ details.processTitle || '发表全流程辅导' }}</view>
@ -168,12 +168,17 @@
data() { data() {
return { return {
details: {}, details: {},
coverImageHeight: '848rpx',
coverImageHeight: '566rpx',
coverImageShadowHeight: '113rpx'
} }
}, },
onLoad({ thesisId }) { onLoad({ thesisId }) {
const windowWidth = uni.getSystemInfoSync().windowWidth const windowWidth = uni.getSystemInfoSync().windowWidth
this.coverImageHeight = `${(windowWidth) * 848 / 714}px`
const coverImageHeight = (windowWidth) * 566 / 714
const coverImageShadowHeight = (windowWidth) * 113 / 714
this.coverImageHeight = `${coverImageHeight}px`
this.coverImageShadowHeight = `${coverImageShadowHeight}px`
this.getData(thesisId) this.getData(thesisId)
// this.getData('1949729528544800770') // this.getData('1949729528544800770')
@ -273,19 +278,16 @@
.shadow { .shadow {
position: absolute; position: absolute;
top: 0;
bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: linear-gradient(transparent, #FFFFFF);
background: linear-gradient(transparent, #FFFFFF 90%, #FFFFFF);
background: linear-gradient(transparent, #FFFFFF);
} }
} }
.page-title { .page-title {
position: absolute;
padding: 0 36rpx; padding: 0 36rpx;
transform: translateY(-100%);
font-size: 60rpx; font-size: 60rpx;
font-weight: 700; font-weight: 700;
color: #4783F9; color: #4783F9;


+ 9
- 8
pages_order/thesis/indexTwo.vue View File

@ -6,7 +6,7 @@
<view class="cover-image" :style="{ height: coverImageHeight }"> <view class="cover-image" :style="{ height: coverImageHeight }">
<image class="img" :src="details.image" mode="scaleToFill" ></image> <image class="img" :src="details.image" mode="scaleToFill" ></image>
<view class="shadow"></view>
<view class="shadow" :style="{ height: coverImageShadowHeight }"></view>
</view> </view>
<view class="page-title"> <view class="page-title">
<view>{{ details.title }}</view> <view>{{ details.title }}</view>
@ -153,13 +153,17 @@
data() { data() {
return { return {
details: {}, details: {},
coverImageHeight: '848rpx',
coverImageHeight: '566rpx',
coverImageShadowHeight: '113rpx'
} }
}, },
onLoad({ thesisId }) { onLoad({ thesisId }) {
const windowWidth = uni.getSystemInfoSync().windowWidth const windowWidth = uni.getSystemInfoSync().windowWidth
this.coverImageHeight = `${(windowWidth) * 848 / 714}px`
const coverImageHeight = (windowWidth) * 566 / 714
const coverImageShadowHeight = (windowWidth) * 113 / 714
this.coverImageHeight = `${coverImageHeight}px`
this.coverImageShadowHeight = `${coverImageShadowHeight}px`
this.getData(thesisId) this.getData(thesisId)
}, },
@ -258,19 +262,16 @@
.shadow { .shadow {
position: absolute; position: absolute;
top: 0;
bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: linear-gradient(transparent, #FFFFFF);
background: linear-gradient(transparent, #FFFFFF 90%, #FFFFFF);
background: linear-gradient(transparent, #FFFFFF);
} }
} }
.page-title { .page-title {
position: absolute;
padding: 0 36rpx; padding: 0 36rpx;
transform: translateY(-100%);
font-size: 60rpx; font-size: 60rpx;
font-weight: 700; font-weight: 700;
color: #4783F9; color: #4783F9;


Loading…
Cancel
Save