feat: UI调整;

App.vue

@@ -14,7 +14,7 @@
 	@import url("common.scss");
 	/*每个页面公共css */
 	body{
-		background-color: #f7f7f7;
+		background-color: #FFFFFF;
 		font-size: 30rpx;
 	}
 	.page{

common.scss

@@ -42,7 +42,6 @@
 .page__view {
 	width: 100vw;
 	min-height: 100vh;
-	background-color: #FAFBFC;
 	position: relative;
 	font-family: PingFang SC;
 	font-weight: 400;

components/base/navbar.vue

@@ -1,40 +1,48 @@
 <template>
 <!-- 	<view class="navbar"
 	:style="{backgroundColor : bgColor}"> -->
-		<view class="title"
+		<view class="title navbar__view"
 		:style="{backgroundColor : bgColor,color}">
-			<view class="left">
-				
-				<uv-icon name="home"
-				v-if="leftClick && length == 1"
-				@click="toHome"
-				:color="color"  size="46rpx"></uv-icon>
-				
-				<uv-icon name="arrow-left"
-				v-else-if="leftClick"
-				@click="$emit('leftClick')"
-				:color="color"  size="46rpx"></uv-icon>
-			</view>
-			<view>{{ title }}</view>
-			<view class="icon">
-				
-				<uv-icon name="search"
-				v-if="isSearch"
-				:color="color"  size="58rpx"></uv-icon>
-				
-				<uv-icon name="plus-circle" :color="color"  
-				v-if="isPlus"
-				@click="plusCircleShow = true"
-				size="46rpx" style="margin-left: 30rpx;"></uv-icon>
-				
-				<view v-if="moreClick" style="margin-left: 30rpx;">
-					<uv-icon name="more-dot-fill" :color="color" 
-					v-if="!moreText"
-					@click="moreClick()"
-					size="46rpx"></uv-icon>
-					<view v-else @click="moreClick"
-					style="font-weight: 400;font-size: 30rpx;">
-						{{ moreText }}
+
+			<view class="nav">
+				<image class="nav-bg" src="@/static/image/bg-nav.png" mode="aspectFill"></image>
+				<image class="nav-logo" src="@/static/image/bg-icon.png" mode="heightFix"></image>
+				<image class="nav-icon" src="@/static/image/icon-question.png" mode="widthFix"></image>
+
+				<view class="main">
+					<view class="left">
+						
+						<uv-icon name="home"
+						v-if="leftClick && length == 1"
+						@click="toHome"
+						:color="color"  size="46rpx"></uv-icon>
+						
+						<button v-else-if="leftClick" class="btn btn-back" @click="$emit('leftClick')" >
+							<image class="btn-back-icon" src="@/static/image/icon-back.png" mode="widthFix"></image>
+						</button>
+					</view>
+					<view>{{ title }}</view>
+					<view class="icon">
+						
+						<uv-icon name="search"
+						v-if="isSearch"
+						:color="color"  size="58rpx"></uv-icon>
+						
+						<uv-icon name="plus-circle" :color="color"  
+						v-if="isPlus"
+						@click="plusCircleShow = true"
+						size="46rpx" style="margin-left: 30rpx;"></uv-icon>
+						
+						<view v-if="moreClick" style="margin-left: 30rpx;">
+							<uv-icon name="more-dot-fill" :color="color" 
+							v-if="!moreText"
+							@click="moreClick()"
+							size="46rpx"></uv-icon>
+							<view v-else @click="moreClick"
+							style="font-weight: 400;font-size: 30rpx;">
+								{{ moreText }}
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -72,7 +80,7 @@
 				default : '#fff'
 			},
 			color : {
-				default : '#333'
+				default : '#666666'
 			}
 		},
 		created() {
@@ -105,17 +113,11 @@
 // 	padding-top: var(--status-bar-height);
 // }
 .title{
+	width: 100%;
+	height: calc(var(--status-bar-height) + 120rpx);
 	position: sticky;
 	top: 0;
 	left: 0;
-	padding-top: calc(var(--status-bar-height) + 20rpx);
-	width: 100%;
-	height: 100rpx;
-	background-color: #fff;
-	display: flex;
-	justify-content: center;
-	font-size: 32rpx;
-	align-items: center;
 	z-index: 999;
 	.left{
 		position: absolute;
@@ -132,6 +134,58 @@
 }
 
 
+  .nav {
+    position: relative;
+    width: 100%;
+		height: 100%;
+
+    &-bg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-logo {
+      position: absolute;
+      top: 0;
+      right: 68rpx;
+      width: auto;
+      height: 100%;
+      opacity: 0.2;
+    }
+
+    &-icon {
+      position: absolute;
+      bottom: 28rpx;
+      right: 40rpx;
+      width: 44rpx;
+      height: auto;
+    }
+  }
+
+	.main {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		justify-content: center;
+		font-size: 44rpx;
+		font-weight: 700;
+		align-items: center;
+		padding-top: calc(var(--status-bar-height) + 20rpx);
+		width: 100%;
+		height: 100rpx;
+	}
+
+	.btn {
+		&-back {
+			&-icon {
+				width: 46rpx;
+				height: auto;
+			}
+		}
+	}
+
+
 @keyframes fade-in {
   0% {
     opacity: 0;

components/base/suspendDropdown.vue

@@ -55,7 +55,7 @@
         return this.options.find(option => option.value === this.value)
       },
       color() {
-        return this.isActive ? '#4883F9' : '#000000'
+        return this.isActive ? '#6851A7' : '#808080'
       }
     },
     methods: {
@@ -86,9 +86,10 @@
   clear: both;
 
   .btn {
-    width: 213rpx;
-    padding: 27rpx 0;
-    font-size: 24rpx;
+    // width: 213rpx;
+    padding: 14rpx 0;
+    font-size: 22rpx;
+    font-weight: 600;
     background: transparent;
     border: none;
 

components/serve/serveModuleCard.vue

@@ -0,0 +1,91 @@
+<template>
+  <view class="card">
+    <view v-if="!isFold" class="content">
+      <view class="list">
+        <view class="list-item" v-for="item in list" :key="item.id">
+          <serveSecondModuleCard :data="item"></serveSecondModuleCard>
+        </view>
+      </view>
+    </view>
+    <serveModuleView :style="style" v-model="isFold" :data="data" @change="onChange"></serveModuleView>
+  </view>
+</template>
+
+<script>
+  import serveModuleView from './serveModuleView.vue';
+  import serveSecondModuleCard from './serveSecondModuleCard.vue';
+
+  export default {
+    components: {
+      serveModuleView,
+      serveSecondModuleCard,
+    },
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        isFold: true,
+        list: [],
+      }
+    },
+    computed: {
+      style() {
+        return this.isFold ? '' : 'position: absolute; top: 0; left: 0; width: 100%;'
+      }
+    },
+    methods: {
+      async getData() {
+        try {
+          this.list = (await this.$fetch('queryCategoryServiceModuleList', { pid: this.data.id, pageNo: 1, pageSize: 1000 }))?.records
+        } catch (err) {
+
+        }
+      },
+      onChange(isFold) {
+        console.log('onChange', isFold)
+        
+        if (isFold) {
+          return
+        }
+
+        if (this.list.length) {
+          return
+        }
+
+        this.getData()
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .card,
+  .content {
+    width: 100%;
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .list {
+    padding: 90rpx 20rpx 0 12rpx;
+    box-sizing: border-box;
+
+    &-item {
+      & + & {
+        margin-top: 26rpx;
+      }
+    }
+  }
+</style>

components/serve/serveModuleView.vue

@@ -0,0 +1,113 @@
+<template>
+  <view :style="style" @click="onClick">
+    <view class="module">
+      <image class="module-bg" src="@/static/image/bg-serve.png" mode="widthFix"></image>
+      <image class="module-bg absolute" src="@/static/image/bg-serve-1.png" mode="widthFix"></image>
+      <image class="module-bg absolute" src="@/static/image/bg-serve-2.png" mode="widthFix"></image>
+      <view class="flex module-fg">
+        <view class="flex module-info">
+          <view class="title">{{ data.title }}</view>
+          <image class="icon" src="@/static/image/serve-icon.png" mode="widthFix"></image>
+        </view>
+        <button class="flex btn">
+          <view>更多</view>
+          <uv-icon name="arrow-down-fill" color="#808080" size="10rpx"></uv-icon>
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    style: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    isFold: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      const isFold = !this.isFold
+      this.isFold = isFold
+      this.$emit('change', isFold)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+  .module {
+    font-size: 0;
+    width: 100%;
+    height: auto;
+    position: relative;
+    &-bg {
+      width: 100%;
+      height: auto;
+    }
+
+    &-fg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      justify-content: space-between;
+      width: 100%;
+      padding: 30rpx 30rpx 0 22rpx;
+      box-sizing: border-box;
+    }
+
+    &-info {
+      column-gap: 16rpx;
+
+      .title {
+        font-size: 32rpx;
+        font-weight: 700;
+        line-height: 1;
+        font-family: PingFang SC;
+        color: transparent;
+        background-image: linear-gradient(to right, #6851A7, #AA87F0);
+        background-clip: text;
+        display: inline-block;
+      }
+
+      .icon {
+        width: 30rpx;
+        height: auto;
+      }
+    }
+
+    .btn {
+      column-gap: 10rpx;
+      font-size: 22rpx;
+      color: #808080;
+    }
+  }
+
+  .absolute {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>

components/serve/serveSecondModuleCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="flex card" @click="jumpToList(data.id, data.title)">
+    <image class="card-icon" :src="data.icon" mode="aspectFit"></image>
+    <view class="flex card-title">
+      <view>{{ data.title }}</view>
+      <image class="card-title-icon" src="@/static/image/serve-second-icon.png" mode="widthFix"></image>
+    </view>
+
+    <image class="card-bg" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    methods: {
+      jumpToList(categoryId, title) {
+        uni.navigateTo({
+					url: `/pages_order/serve/search?categoryId=${categoryId}&title=${title}`
+				})
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .card {
+    justify-content: flex-start;
+    column-gap: 78rpx;
+    position: relative;
+    width: 100%;
+    height: 200rpx;
+    padding: 0 28rpx;
+    box-sizing: border-box;
+    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);
+
+    &-icon {
+      width: 180rpx;
+      height: 230rpx;
+    }
+
+    &-title {
+      column-gap: 14rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #9082D8;
+
+      &-icon {
+        width: 24rpx;
+        height: auto;
+      }   
+    }
+
+    &-bg {
+      width: 142rpx;
+      height: auto;
+      position: absolute;
+      bottom: 0;
+      right: 8rpx;
+    }
+  }
+</style>

pages.json

@@ -59,7 +59,7 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "酒店桌布",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
+		"backgroundColor": "#FFFFFF",
 		"navigationStyle": "custom"
 	},
 	"uniIdRouter": {}

pages/index/case.vue

@@ -1,49 +1,62 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
+      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
-    <!-- 搜索栏 -->
-    <view class="search">
-      <uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
-        <template #prefix>
-          <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
-        </template>
-      </uv-search>
-    </view>
-
-    <!-- 轮播图 -->
-    <view class="swiper">
-      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" :height="swiperHeight"></uv-swiper>
-    </view>
+    <view class="main">
 
-    <view class="flex filter">
-      <view class="filter-item">
-        <suspendDropdown v-model="queryParams.categoryServiceId" label="服务分类筛选" :options="serviceOptions" @change="onFilterChange"></suspendDropdown>
+      <view class="flex section header">
+        <view>
+          <view class="title">{{ configList.page_case_title }}</view>
+          <view class="desc">{{ configList.page_case_desc }}</view>
+        </view>
       </view>
-      <view class="filter-item">
-        <suspendDropdown v-model="queryParams.categoryMajorId" label="专业筛选" :options="majorOptions" @change="onFilterChange"></suspendDropdown>
+
+      <!-- 搜索栏 -->
+      <view class="section search">
+        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
+          <template #prefix>
+            <view class="flex search-icon">
+              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
+            </view>
+          </template>
+        </uv-search>
       </view>
-      <view class="filter-item">
-        <suspendDropdown v-model="queryParams.categoryPeriodId" label="阶段筛选" :options="periodOptions" @change="onFilterChange"></suspendDropdown>
+
+      <!-- 轮播图 -->
+      <view class="section swiper">
+        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></uv-swiper>
       </view>
-    </view>
 
-    <view class="list">
-      <template v-if="total">
-        <view class="list-item" v-for="item in list" :key="item.id" @click="jumpToDetail(item.id)">
-          <image class="img" :src="item.image" mode="aspectFill"></image>
+      <view class="flex filter">
+        <view class="filter-item">
+          <suspendDropdown v-model="queryParams.categoryServiceId" label="服务分类筛选" :options="serviceOptions" @change="onFilterChange"></suspendDropdown>
         </view>
-        </template>
-      <template v-else>
-        <view class="flex empty">
-          <image class="empty-icon" src="@/static/image/icon-empty.png" mode="widthFix"></image>
+        <view class="filter-item">
+          <suspendDropdown v-model="queryParams.categoryMajorId" label="专业筛选" :options="majorOptions" @change="onFilterChange"></suspendDropdown>
         </view>
-      </template>
-    </view>
+        <view class="filter-item">
+          <suspendDropdown v-model="queryParams.categoryPeriodId" label="阶段筛选" :options="periodOptions" @change="onFilterChange"></suspendDropdown>
+        </view>
+      </view>
 
-		<tabber select="case" />
+      <view class="list">
+        <template v-if="total">
+          <view class="list-item" v-for="item in list" :key="item.id" @click="jumpToDetail(item.id)">
+            <image class="img" :src="item.image" mode="aspectFill"></image>
+          </view>
+          </template>
+        <template v-else>
+          <view class="flex empty">
+            <image class="empty-icon" src="@/static/image/icon-empty.png" mode="widthFix"></image>
+          </view>
+        </template>
+      </view>
+
+      <tabber select="case" />
+    </view>
   </view>
 </template>
 
@@ -136,81 +149,154 @@
 
 <style scoped lang="scss">
   .page__view {
-    padding-bottom: 182rpx;
+    /deep/ .tabbar-box {
+      height: 0;
+      padding: 0;
+    }
+  }
+
+  .header {
+    margin-bottom: 32rpx;
+    padding-top: calc(var(--status-bar-height) + 40rpx);
+    justify-content: space-between;
+
+    .title {
+      font-size: 44rpx;
+      font-weight: 600;
+      color: #6851A7;
+    }
+
+    .desc {
+      font-size: 18rpx;
+      font-weight: 500;
+      color: #808080;
+    }
+
+    .icon {
+      // margin-top: 16rpx;
+      width: 62rpx;
+      height: 62rpx;
+      border: 2rpx solid #A3A2C5;
+      border-radius: 50%;
+      overflow: hidden;
+      
+      .img {
+        width: 50rpx;
+        height: auto;
+      }
+    }
   }
 
   .bg {
-    width: 100%;
-    height: 264rpx;
+    position: relative;
+    width: 100vw;
+    height: auto;
 
     .img {
       width: 100%;
-      height: 100%;
+      height: auto;
+    }
+
+    &-logo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 342rpx;
+      height: auto;
+      opacity: 0.3;
     }
   }
 
+  .main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    padding-bottom: 182rpx;
+    box-sizing: border-box;
+  }
+
+  .section {
+    margin: 0 38rpx 24rpx 38rpx;
+  }
+  
 	.search {
-    margin: 0 18rpx;
-    width: calc(100% - 20rpx * 2);
+    width: calc(100% - 38rpx * 2);
+    height: 48rpx;
 		background-color: #FFFFFF;
 		border-radius: 37rpx;
-		padding: 13rpx 0 13rpx 18rpx;
     box-sizing: border-box;
 		display: flex;
 		align-items: center;
+    overflow: hidden;
+    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);
+
+		/deep/ .uv-search__content {
+      padding: 0;
+      border: none;
+    }
 
-		/deep/ .uv-search__action {
-			color: $uni-color;
-			padding: 10rpx 18rpx;
-		}
+    /deep/ .uv-search__content__input {
+      margin-left: 18rpx;
+    }
 
     &-icon {
-      width: 26rpx;
-      height: auto;
+      padding: 18rpx 10rpx 18rpx 18rpx;
+      background: rgba($color: #E8DBF3, $alpha: 0.8);
+
+      .img {
+        width: 30rpx;
+        height: auto;
+      }
     }
 	}
 
   .swiper {
-    margin: 29rpx 18rpx 0 18rpx;
-    border-radius: 25rpx 25rpx 0 0;
+    border-radius: 10rpx;
     overflow: hidden;
     
     /deep/ .uv-swiper-indicator__wrapper__dot {
-      width: 15rpx;
-      height: 15rpx;
+      width: 25rpx;
+      height: 5rpx;
+      border-radius: 4rpx;
+      margin: 0 4rpx;
     }
 
     /deep/ .uv-swiper-indicator__wrapper__dot--active {
-      width: 15rpx;
+      width: 25rpx;
     }
   }
 
   .filter {
-    column-gap: 33rpx;
-    padding: 0 23rpx;
-    background: #FFFFFF;
+    justify-content: space-between;
+    margin: 0 38rpx 18rpx 38rpx;
+    padding: 0 20rpx;
+    background: #FAF9FD;
+    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #2A2A2B, $alpha: 0.12);
+    border-radius: 4rpx;
 
     &-item {
-      flex: 1;
+      // flex: 1;
     }
 
   }
 
   .list {
-    padding: 34rpx 0;
+    padding-bottom: 38rpx;
 
     &-item {
-      $width: calc(100vw - 37rpx * 2);
+      $width: calc(100vw - 38rpx * 2);
 
-      margin: 0 37rpx;
+      margin: 0 38rpx;
       width: $width;
       // height: 284rpx;
-      height: calc(#{$width} * 284 / 677);
-      border-radius: 15rpx;
+      height: calc(#{$width} * 282 / 672);
+      border-radius: 10rpx;
       overflow: hidden;
+      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #000000, $alpha: 0.15);
 
       & + & {
-        margin-top: 25rpx;
+        margin-top: 18rpx;
       }
 
       .img {

pages/index/center.vue

@@ -1,25 +1,43 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
+      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
-    <!-- 轮播图 -->
-    <view class="section swiper">
-      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="424rpx"></uv-swiper>
-    </view>
+    <view class="main">
 
-    <view class="list">
-      <view class="list-item" @click="jumpToDetail('other_service')">
-        <image class="list-item-bg" :src="configList.config_image_service" mode="scaleToFill"></image>
-        <!-- <view class="list-item-fg">
-          <view class="title">其他服务</view>
-          <view class="desc">Other services</view>
-        </view> -->
+      <view class="flex section header">
+        <view>
+          <view class="title">{{ configList.page_center_title }}</view>
+          <view class="desc">{{ configList.page_center_desc }}</view>
+        </view>
+        <view class="flex icon">
+          <image class="img" :src="configList.config_logo" mode="widthFix"></image>
+        </view>
+      </view>
+
+      <!-- 轮播图 -->
+      <view class="section swiper">
+        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="424rpx"></uv-swiper>
       </view>
-    </view>
 
-		<tabber select="center" />
+      <view class="list">
+        <view class="list-item" @click="jumpToDetail('other_service')">
+          <!-- <image class="list-item-bg" :src="configList.config_image_service" mode="scaleToFill"></image> -->
+          <image class="list-item-bg" src="@/static/image/bg-other-serve.png" mode="widthFix"></image>
+          <view class="flex list-item-fg">
+            <image class="icon" src="@/static/image/icon-other-serve.png" mode="widthFix"></image>
+            <view class="info">
+              <view class="title">其他服务</view>
+              <view class="desc">Other services</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+		  <tabber select="center" />
+    </view>
   </view>
 </template>
 
@@ -57,67 +75,149 @@
 </script>
 
 <style scoped lang="scss">
+  .page__view {
+    /deep/ .tabbar-box {
+      height: 0;
+      padding: 0;
+    }
+  }
+
+  .header {
+    padding-top: calc(var(--status-bar-height) + 40rpx);
+    justify-content: space-between;
+
+    .title {
+      font-size: 44rpx;
+      font-weight: 600;
+      color: #6851A7;
+    }
+
+    .desc {
+      font-size: 18rpx;
+      font-weight: 500;
+      color: #808080;
+    }
+
+    .icon {
+      // margin-top: 16rpx;
+      width: 62rpx;
+      height: 62rpx;
+      border: 2rpx solid #A3A2C5;
+      border-radius: 50%;
+      overflow: hidden;
+      
+      .img {
+        width: 50rpx;
+        height: auto;
+      }
+    }
+  }
 
   .bg {
-    width: 100%;
-    height: 264rpx;
+    width: 100vw;
+    height: auto;
 
     .img {
       width: 100%;
-      height: 100%;
+      height: auto;
     }
+
+    &-logo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 342rpx;
+      height: auto;
+      opacity: 0.3;
+    }
+  }
+
+  .main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    padding-bottom: 182rpx;
+    box-sizing: border-box;
+  }
+
+  .section {
+    margin: 0 38rpx 24rpx 38rpx;
   }
 
   .swiper {
-    margin: 0 18rpx 15rpx 18rpx;
-    border-radius: 25rpx;
+    border-radius: 10rpx;
     overflow: hidden;
     
     /deep/ .uv-swiper-indicator__wrapper__dot {
-      width: 15rpx;
-      height: 15rpx;
+      width: 25rpx;
+      height: 5rpx;
+      border-radius: 4rpx;
+      margin: 0 4rpx;
     }
 
     /deep/ .uv-swiper-indicator__wrapper__dot--active {
-      width: 15rpx;
+      width: 25rpx;
     }
   }
 
   .list {
-    margin: 0 18rpx;
+    padding: 0 38rpx;
 
     &-item {
       position: relative;
+      width: 100%;
+      height: 170rpx;
       font-size: 0;
-      border-radius: 25rpx;
+      border-radius: 10rpx;
       overflow: hidden;
-      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
+      background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.26), rgba($color: #C8C3FD, $alpha: 0.26));
+      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);
 
       & + & {
         margin-top: 19rpx;
       }
       
       &-bg {
-        $w: calc(100vw - 18rpx*2);
-        width: $w;
-        height: calc(#{$w} * 179 / 714);
+        // $w: calc(100vw - 18rpx*2);
+        // width: $w;
+        // height: calc(#{$w} * 179 / 714);
+        width: 100%;
+        height: 100%;
       }
 
       &-fg {
+        justify-content: flex-start;
+        align-items: flex-start;
+        column-gap: 84rpx;
         position: absolute;
-        top: 70rpx;
-        left: 43rpx;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 10rpx 32rpx;
+        box-sizing: border-box;
+
+        .icon {
+          width: 146rpx;
+          height: auto;
+        }
+
+        .info {
+          margin-top: 40rpx;
+        }
 
         .title {
-          font-size: 32rpx;
+          font-size: 34rpx;
           font-weight: 700;
-          color: #000000;
+          color: #9082D8;
         }
 
         .desc {
-          margin-top: 2rpx;
+          margin-top: 8rpx;
           font-size: 28rpx;
-          color: #8A8784;
+          font-weight: 700;
+          color: #9C97B2;
         }
       }
     }

pages/index/index.vue

@@ -1,59 +1,79 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
+      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
-    <!-- 搜索栏 -->
-    <view class="section search">
-      <uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
-        <template #prefix>
-          <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
-        </template>
-      </uv-search>
-    </view>
+    <view class="main">
 
-    <!-- 轮播图 -->
-    <view class="section swiper">
-      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" :height="swiperHeight"></uv-swiper>
-    </view>
+      <view class="flex section header">
+        <view>
+          <view class="title">{{ configList.page_index_title }}</view>
+          <view class="desc">{{ configList.page_index_desc }}</view>
+        </view>
+        <view class="flex icon">
+          <image class="img" :src="configList.config_logo" mode="widthFix"></image>
+        </view>
+      </view>
 
-    <view class="section card" v-for="group in list" :key="group.id">
-      <view class="card-header">
-        <view class="card-header-title">{{ group.title }}</view>
-        <!-- <view class="card-header-tag">JGYT</view> -->
+      <!-- 搜索栏 -->
+      <view class="section search">
+        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
+          <template #prefix>
+            <view class="flex search-icon">
+              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
+            </view>
+          </template>
+        </uv-search>
       </view>
 
-      <view class="card-content">
-        <view class="card-item card-row" v-for="item in group.children" :key="item.id">
-          <view class="flex info">
-            <image class="info-icon" :src="item.image" mode="widthFix"></image>
-            <view class="info-label">{{ item.title }}</view>
-          </view>
-          <button class="btn" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisList')">查看</button>
-        </view>
+      <!-- 轮播图 -->
+      <view class="section swiper">
+        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="240rpx"></uv-swiper>
       </view>
 
-    </view>
+      <view class="section card" v-for="group in list" :key="group.id">
+        <view class="card-header">
+          <view class="card-header-title">{{ group.title }}</view>
+          <image class="card-header-icon" src="@/static/image/icon-triangle-down.png" mode="widthFix"></image>
+        </view>
+
+        <view class="card-content">
+          <view class="card-item card-row" v-for="item in group.children" :key="item.id">
+            <view class="flex info">
+              <image class="info-icon" :src="item.image" mode="widthFix"></image>
+              <view class="info-label">{{ item.title }}</view>
+            </view>
+            <button class="flex btn" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisList')">
+              <view>查看</view>
+              <image class="btn-icon" src="@/static/image/icon-arrow-right.png" mode="widthFix"></image>
+            </button>
+          </view>
+        </view>
 
-    <view class="section card" v-for="group in list2" :key="group.id">
-      <view class="card-header">
-        <view class="card-header-title">{{ group.title }}</view>
-        <!-- <view class="card-header-tag">JGYT</view> -->
       </view>
 
-      <view class="card-content">
-        <view class="card-box">
-          <view class="card-item info" v-for="item in group.children" :key="item.id" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisTwoList')">
-            <image class="info-icon" :src="item.image" mode="widthFix"></image>
-            <view class="info-label">{{ item.title }}</view>
+      <view class="section card" v-for="group in list2" :key="group.id">
+        <view class="card-header">
+          <view class="card-header-title">{{ group.title }}</view>
+          <image class="card-header-icon" src="@/static/image/icon-triangle-down.png" mode="widthFix"></image>
+        </view>
+
+        <view class="card-content">
+          <view class="card-box">
+            <view class="card-item info" v-for="item in group.children" :key="item.id" @click="jumpToCategory(group.id, item.id, item.title, 'queryThesisTwoList')">
+              <image class="info-icon" :src="item.image" mode="widthFix"></image>
+              <view class="info-label">{{ item.title }}</view>
+            </view>
           </view>
         </view>
+
       </view>
 
-    </view>
+  		<tabber select="home" />
 
-		<tabber select="home" />
+    </view>
   </view>
 </template>
 
@@ -70,14 +90,9 @@
         bannerList: [],
         list: [],
         list2: [],
-        swiperHeight: '239rpx',
       }
     },
     onLoad() {
-
-      const windowWidth = uni.getSystemInfoSync().windowWidth
-      this.swiperHeight = `${(windowWidth - 18) * 239 / 714}px`
-      
       this.fetchBanner()
       this.getData()
     },
@@ -127,94 +142,152 @@
 
 <style scoped lang="scss">
   .page__view {
-    padding-bottom: 182rpx;
+    /deep/ .tabbar-box {
+      height: 0;
+      padding: 0;
+    }
+  }
+
+  .header {
+    padding-top: calc(var(--status-bar-height) + 40rpx);
+    justify-content: space-between;
+
+    .title {
+      font-size: 44rpx;
+      font-weight: 600;
+      color: #6851A7;
+    }
+
+    .desc {
+      font-size: 18rpx;
+      font-weight: 500;
+      color: #808080;
+    }
+
+    .icon {
+      // margin-top: 16rpx;
+      width: 62rpx;
+      height: 62rpx;
+      border: 2rpx solid #A3A2C5;
+      border-radius: 50%;
+      overflow: hidden;
+      
+      .img {
+        width: 50rpx;
+        height: auto;
+      }
+    }
   }
 
   .bg {
-    width: 100%;
-    height: 264rpx;
+    width: 100vw;
+    height: auto;
 
     .img {
       width: 100%;
-      height: 100%;
+      height: auto;
+    }
+
+    &-logo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 342rpx;
+      height: auto;
+      opacity: 0.3;
     }
   }
 
+  .main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    padding-bottom: 182rpx;
+    box-sizing: border-box;
+  }
+
   .section {
-    margin: 0 18rpx 0 18rpx;
+    margin: 0 38rpx 24rpx 38rpx;
   }
 
 	.search {
-    width: calc(100% - 20rpx * 2);
+    width: calc(100% - 38rpx * 2);
+    height: 48rpx;
 		background-color: #FFFFFF;
 		border-radius: 37rpx;
-		padding: 13rpx 0 13rpx 18rpx;
     box-sizing: border-box;
 		display: flex;
 		align-items: center;
+    overflow: hidden;
+    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);
+
+		/deep/ .uv-search__content {
+      padding: 0;
+      border: none;
+    }
 
-		/deep/ .uv-search__action {
-			color: $uni-color;
-			padding: 10rpx 18rpx;
-		}
+    /deep/ .uv-search__content__input {
+      margin-left: 18rpx;
+    }
 
     &-icon {
-      width: 26rpx;
-      height: auto;
+      padding: 18rpx 10rpx 18rpx 18rpx;
+      background: rgba($color: #E8DBF3, $alpha: 0.8);
+
+      .img {
+        width: 30rpx;
+        height: auto;
+      }
     }
 	}
 
   .swiper {
-    margin-top: 29rpx;
-    margin-bottom: 26rpx;
-    border-radius: 25rpx;
+    border-radius: 10rpx;
     overflow: hidden;
     
     /deep/ .uv-swiper-indicator__wrapper__dot {
-      width: 15rpx;
-      height: 15rpx;
+      width: 25rpx;
+      height: 5rpx;
+      border-radius: 4rpx;
+      margin: 0 4rpx;
     }
 
     /deep/ .uv-swiper-indicator__wrapper__dot--active {
-      width: 15rpx;
+      width: 25rpx;
     }
   }
 
   .card {
-    margin-bottom: 35rpx;
-    width: calc(100% - 20rpx * 2);
+    width: calc(100% - 38rpx * 2);
     box-sizing: border-box;
     padding-bottom: 45rpx;
-    background-image: linear-gradient(164deg,#cfecfe 88rpx, #fcfdfe 176rpx);
-    border: 3rpx solid #FFFFFF;
-    border-radius: 25rpx;
-    box-shadow: 0px 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
+    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.14), rgba($color: #E2DDFF, $alpha: 0.14));
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15);
 
     &-header {
-      position: relative;
+      display: flex;
+      align-items: center;
+      column-gap: 23rpx;
       width: 100%;
+      padding: 25rpx 30rpx 27rpx 30rpx;
       box-sizing: border-box;
-      padding: 46rpx 0 17rpx 33rpx;
-      overflow: hidden;
 
       &-title {
-        font-size: 42rpx;
-        font-weight: 800;
-        color: #000000;
+        font-size: 34rpx;
+        font-weight: 700;
+        color: #4D4D4D;
       }
 
-      &-tag {
-        position: absolute;
-        top: -40rpx;
-        right: 12rpx;
-        font-size: 156rpx;
-        font-weight: 800;
-        color: rgba(255,255,255,0.3);
+      &-icon {
+        width: 32rpx;
+        height: auto;
       }
     }
 
     &-content {
-      padding: 0 30rpx;
+      padding: 0 32rpx;
       box-sizing: border-box;
     }
 
@@ -223,23 +296,24 @@
       align-items: center;
       justify-content: flex-start;
       column-gap: 50rpx;
-      padding: 26rpx 28rpx;
+      padding: 14rpx 28rpx;
       box-sizing: border-box;
-      background: #f3f6fd;
-      border-radius: 28rpx;
-      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
+      background: linear-gradient(to right, rgba($color: #E2DDFF, $alpha: 0.26), rgba($color: #C8C3FD, $alpha: 0.26));
+      // background: rgba($color: #E2DDFF, $alpha: 0.26);
+      border-radius: 10rpx;
+      box-shadow: 4rpx 4rpx 6rpx 0rpx rgba($color: #626266, $alpha: 0.15);
     }
 
     
     .info {
 
       &-icon {
-        width: 80rpx;
+        width: 54rpx;
         height: auto;
       }
 
       &-label {
-        font-size: 32rpx;
+        font-size: 26rpx;
         font-weight: 400;
         color: #000000;
       }
@@ -247,23 +321,29 @@
 
     &-row {
       justify-content: space-between;
-      padding: 15rpx 35rpx;
+      padding: 14rpx 30rpx 14rpx 42rpx;
 
       & + & {
-        margin-top: 33rpx;
+        margin-top: 28rpx;
       }
 
       .info {
-        column-gap: 33rpx;
+        column-gap: 35rpx;
       }
 
       .btn {
-        padding: 7rpx 30rpx;
-        font-size: 28rpx;
+        column-gap: 12rpx;
+        padding: 8rpx 24rpx 8rpx 26rpx;
+        font-size: 20rpx;
         font-weight: 400;
-        color: #4883F9;
+        color: #6851A7;
         background: #FFFFFF;
-        border-radius: 27rpx;
+        border-radius: 20rpx;
+
+        &-icon {
+          width: 22rpx;
+          height: auto;
+        }
       }
     }
 

pages/index/serve.vue

@@ -1,43 +1,82 @@
 <template>
   <view class="page__view">
     <view class="bg">
-      <image class="img" :src="configList.config_image_page_header" mode="scaleToFill"></image>
+      <image class="img" src="@/static/image/bg-index.png" mode="widthFix"></image>
+      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
     </view>
 
-    <!-- 轮播图 -->
-    <view class="section swiper">
-      <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="424rpx"></uv-swiper>
-    </view>
+    <view class="main">
 
-    <view class="list">
-      <view class="list-item"
-        v-for="item in firstCategoryList" 
-        :key="item.id"
-        @click="jumpToSecondCategory(item.id, item.title)"
-      >
-        <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
+      <view class="flex section header">
+        <view>
+          <view class="title">{{ configList.page_serve_title }}</view>
+          <view class="desc">{{ configList.page_serve_desc }}</view>
+        </view>
+      </view>
+
+      <!-- 搜索栏 -->
+      <view class="section search">
+        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
+          <template #prefix>
+            <view class="flex search-icon">
+              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
+            </view>
+          </template>
+        </uv-search>
       </view>
-    </view>
 
-		<tabber select="serve" />
+      <!-- 轮播图 -->
+      <!-- <view class="section swiper">
+        <uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#FFFFFF" indicatorInactiveColor="#6851A7" height="424rpx"></uv-swiper>
+      </view> -->
+
+      <!-- <view class="list">
+        <view class="list-item"
+          v-for="item in list" 
+          :key="item.id"
+          @click="jumpToSecondCategory(item.id, item.title)"
+        >
+          <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
+        </view>
+      </view> -->
+      <view class="list">
+        <view class="list-item" v-for="item in list" :key="item.id" >
+          <serveModuleCard :data="item"></serveModuleCard>
+        </view>
+      </view>
+
+      <tabber select="serve" />
+    </view>
   </view>
 </template>
 
 <script>
+	import mixinsList from '@/mixins/list.js'
+
 	import tabber from '@/components/base/tabbar.vue'
+  import serveModuleCard from '@/components/serve/serveModuleCard.vue'
 
   export default {
+		mixins: [mixinsList],
 		components: {
+      serveModuleCard,
       tabber,
     },
     data() {
       return {
+				keyword: '',
+				queryParams: {
+					pageNo: 1,
+					pageSize: 10,
+					pid: '0',
+				},
+        mixinsListApi: 'queryCategoryServiceModuleList',
         bannerList: [],
         firstCategoryList: [],
       }
     },
     onLoad() {
-      this.fetchBanner()
+      // this.fetchBanner()
       this.getData()
     },
     methods: {
@@ -49,13 +88,9 @@
 
 				}
 			},
-      async getData() {
-        try {
-          this.firstCategoryList = (await this.$fetch('queryCategoryServiceModuleList', { pageNo: 1, pageSize: 1000 }))?.records?.filter(item => item.hasChild == '1')
-        } catch (err) {
-
-        }
-      },
+			search() {
+        // todo
+			},
       jumpToSecondCategory(pid, title) {
         uni.navigateTo({
 					url: `/pages_order/serve/category?pid=${pid}&title=${title}`
@@ -67,13 +102,61 @@
 
 <style scoped lang="scss">
 
+  .page__view {
+    /deep/ .tabbar-box {
+      height: 0;
+      padding: 0;
+    }
+  }
+
+  .header {
+    margin-bottom: 32rpx;
+    padding-top: calc(var(--status-bar-height) + 40rpx);
+    justify-content: space-between;
+
+    .title {
+      font-size: 44rpx;
+      font-weight: 600;
+      color: #6851A7;
+    }
+
+    .desc {
+      font-size: 18rpx;
+      font-weight: 500;
+      color: #808080;
+    }
+
+    .icon {
+      // margin-top: 16rpx;
+      width: 62rpx;
+      height: 62rpx;
+      border: 2rpx solid #A3A2C5;
+      border-radius: 50%;
+      overflow: hidden;
+      
+      .img {
+        width: 50rpx;
+        height: auto;
+      }
+    }
+  }
+
   .bg {
-    width: 100%;
-    height: 264rpx;
+    width: 100vw;
+    height: auto;
 
     .img {
       width: 100%;
-      height: 100%;
+      height: auto;
+    }
+
+    &-logo {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 342rpx;
+      height: auto;
+      opacity: 0.3;
     }
   }
 
@@ -81,108 +164,68 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    padding: 156rpx 0 182rpx 0;
+    width: 100vw;
+    padding-bottom: 182rpx;
+    box-sizing: border-box;
   }
 
-  .header {
+  .section {
+    margin: 0 38rpx 24rpx 38rpx;
+  }
 
-    .title {
-      margin-left: 25rpx;
-      position: relative;
-      padding: 51rpx 0 6rpx 42rpx;
-
-      &-line {
-        width: 151rpx;
-        height: 11rpx;
-        background: linear-gradient(76deg,#ffffff 2%, #4883f9 88%);
-        border-radius: 6rpx;
-      }
+	.search {
+    width: calc(100% - 38rpx * 2);
+    height: 48rpx;
+		background-color: #FFFFFF;
+		border-radius: 37rpx;
+    box-sizing: border-box;
+		display: flex;
+		align-items: center;
+    overflow: hidden;
+    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);
 
-      &-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        font-size: 46rpx;
-        font-weight: 700;
-        color: #FFFFFF;
-      }
+		/deep/ .uv-search__content {
+      padding: 0;
+      border: none;
+    }
 
+    /deep/ .uv-search__content__input {
+      margin-left: 18rpx;
     }
 
-    .desc {
-      font-size: 30rpx;
-      font-weight: 700;
-      color: #FFFFFF;
-      margin: 14rpx 28rpx 32rpx 28rpx;
+    &-icon {
+      padding: 18rpx 10rpx 18rpx 18rpx;
+      background: rgba($color: #E8DBF3, $alpha: 0.8);
+
+      .img {
+        width: 30rpx;
+        height: auto;
+      }
     }
-  }
+	}
 
   .swiper {
-    margin: 0 18rpx 15rpx 18rpx;
-    border-radius: 25rpx;
+    border-radius: 10rpx;
     overflow: hidden;
     
     /deep/ .uv-swiper-indicator__wrapper__dot {
-      width: 15rpx;
-      height: 15rpx;
+      width: 25rpx;
+      height: 5rpx;
+      border-radius: 4rpx;
+      margin: 0 4rpx;
     }
 
     /deep/ .uv-swiper-indicator__wrapper__dot--active {
-      width: 15rpx;
+      width: 25rpx;
     }
   }
 
   .list {
-    margin: 0 18rpx;
-
+    padding: 0 28rpx 0 32rpx;
+    
     &-item {
-      position: relative;
-      font-size: 0;
-      border-radius: 25rpx;
-      overflow: hidden;
-      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
-
       & + & {
-        margin-top: 32rpx;
-      }
-
-      &-bg {
-        $w: calc(100vw - 18rpx*2);
-        width: $w;
-        height: calc(#{$w} * 179 / 714);
-      }
-
-      &-fg {
-        position: absolute;
-        top: 38rpx;
-        left: 51rpx;
-
-        .title {
-          font-size: 32rpx;
-          font-weight: 700;
-          color: #E67722;
-        }
-
-        .desc {
-          margin-top: 2rpx;
-          font-size: 28rpx;
-          color: #BEA898;
-        }
-      }
-
-      &:nth-child(2n) {
-        .list-item-fg {
-          left: 200rpx;
-
-          .title {
-            color: #052464;
-          }
-
-          .desc {
-            color: #A8BADE;
-          }
-        }
+        margin-top: 26rpx;
       }
     }
   }

pages_order/thesis/search.vue

@@ -2,15 +2,16 @@
   <view class="page__view">
     
 		<!-- 导航栏 -->
-		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
-
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />
     
     <view class="top">
       <!-- 搜索栏 -->
       <view class="search">
-				<uv-search v-model="keyword" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
+        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
           <template #prefix>
-            <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
+            <view class="flex search-icon">
+              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
+            </view>
           </template>
         </uv-search>
       </view>
@@ -18,22 +19,8 @@
 
     <view class="main">
       <template v-if="total">
-        <view class="flex card" v-for="item in list" :key="item.id" @click="jumpToDetail(item.id)">
-          <view class="left">
-            <view class="title-box" v-if="item.title">
-              <view class="title">{{ item.title }}</view>
-            </view>
-            <view class="content-box" v-if="item.shortTitle">
-              <view class="content">
-                {{ item.shortTitle || '' }}
-              </view>
-              <view class="dot bottom-left"></view>
-              <view class="dot top-right"></view>
-            </view>
-          </view>
-          <view class="right">
-            <image class="img" :src="item.paperImage" mode="aspectFill"></image>
-          </view>
+        <view class="card" v-for="item in list" :key="item.id">
+          <thesisCard :data="item" @jumpToDetail="jumpToDetail(item.id)"></thesisCard>
         </view>
       </template>
       <template v-else>
@@ -49,8 +36,13 @@
 <script>
 	import mixinsList from '@/mixins/list.js'
 
+  import thesisCard from './thesisCard.vue'
+
   export default {
 		mixins: [mixinsList],
+    components: {
+      thesisCard,
+    },
     data() {
       return {
         title: '搜索',
@@ -106,136 +98,57 @@
   }
 
   .top {
-    padding: 49rpx 0 17rpx 0;
+    padding: 34rpx 38rpx 28rpx 38rpx;
     box-sizing: border-box;
   }
 
 	.search {
-    margin: 0 19rpx;
-    width: calc(100% - 20rpx * 2);
+    width: 100%;
+    // width: calc(100% - 38rpx * 2);
+    height: 48rpx;
 		background-color: #FFFFFF;
 		border-radius: 37rpx;
-		padding: 13rpx 0 13rpx 18rpx;
     box-sizing: border-box;
 		display: flex;
 		align-items: center;
+    overflow: hidden;
+    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);
 
-		/deep/ .uv-search__action {
-			color: $uni-color;
-			padding: 10rpx 18rpx;
-		}
+		/deep/ .uv-search__content {
+      padding: 0;
+      border: none;
+    }
+
+    /deep/ .uv-search__content__input {
+      margin-left: 18rpx;
+    }
 
     &-icon {
-      width: 26rpx;
-      height: auto;
+      padding: 18rpx 10rpx 18rpx 18rpx;
+      background: rgba($color: #E8DBF3, $alpha: 0.8);
+
+      .img {
+        width: 30rpx;
+        height: auto;
+      }
     }
 	}
 
   .main {
-    padding: 17rpx;
+    padding: 0 38rpx 38rpx 38rpx;
     box-sizing: border-box;
   }
 
   .card {
-    align-items: flex-start;
-    background: #ffffff;
-    border-radius: 20rpx;
-    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
-
+    background: #FFFFFF;
+    border-radius: 10rpx;
+    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15); 
+    overflow: hidden;
+    
     & + & {
-      margin-top: 27rpx;
+      margin-top: 26rpx;
     }
 
-    .left {
-      flex: 1;
-      position: relative;
-      // padding: 13rpx 32rpx 35rpx 20rpx;
-      padding: 13rpx 70rpx 35rpx 20rpx;
-      box-sizing: border-box;
-
-      .title {
-        font-size: 32rpx;
-        font-weight: 700;
-        color: $uni-color;
-        padding: 4rpx 16rpx;
-        background: #FFFFFF;
-        border-radius: 12rpx;
-
-        &-box {
-          position: absolute;
-          top: 0;
-          z-index: 1;
-          display: inline-block;
-          padding: 4rpx;
-          background: linear-gradient(to right, $uni-color, #FFFFFF);
-          border-radius: 14rpx;
-          transform: translateY(50%);
-        }
-      }
-
-      .content {
-        font-size: 24rpx;
-        font-weight: 400;
-        color: #000000;
-        white-space: pre-wrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display:-webkit-box; //作为弹性伸缩盒子模型显示。
-        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-        -webkit-line-clamp:7; //显示的行
-
-        &-box {
-          margin-top: 40rpx;
-          position: relative;
-          padding: 40rpx 16rpx;
-          border: 4rpx solid $uni-color;
-          border-radius: 20rpx;
-
-          &:after {
-            content: ' ';
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 20rpx;
-            height: 40rpx;
-            background: #FFFFFF;
-            transform: translate(4rpx, 4rpx);
-          }
-
-          .dot {
-            position: absolute;
-            z-index: 2;
-            width: 8rpx;
-            height: 8rpx;
-            background: $uni-color;
-            border-radius: 50%;
-
-            &.bottom-left {
-              bottom: 0;
-              right: 16rpx;
-              transform: translateY(6rpx);
-            }
-
-            &.top-right {
-              bottom: 36rpx;
-              right: 0;
-              transform: translateX(6rpx);
-            }
-          }
-        }
-      }
-    }
-
-    .right {
-      padding: 23rpx 17rpx 23rpx 0;
-      box-sizing: border-box;
-
-      .img {
-        $w: 225rpx;
-        width: 225rpx;
-        height: calc(#{$w} * 1184 / 750);
-      }
-    }
   }
   
   .empty {

pages_order/thesis/thesisCard.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="flex card" @click="jumpToDetail(data.id)">
+    <view class="flex main" style="opacity: 0;">
+      <view class="left">
+        <thesisInfoView :data="data"></thesisInfoView>
+      </view>
+      <view class="right">
+        <image class="img" :src="data.paperImage" mode="aspectFill"></image>
+      </view>
+    </view>
+    <view class="bg">
+      <image class="img" src="@/static/image/card-bg-icon.png" mode="widthFix"></image>
+    </view>
+    <view class="flex main" style="position: absolute; left: 0; top: 0;">
+      <view class="left">
+        <thesisInfoView :data="data"></thesisInfoView>
+      </view>
+      <view class="right">
+        <image class="img" :src="data.paperImage" mode="aspectFill"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import thesisInfoView from './thesisInfoView.vue';
+
+  export default {
+    components: {
+      thesisInfoView,
+    },
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    },
+    methods: {
+      jumpToDetail(thesisId) {
+        this.$emit('jumpToDetail')
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .card {
+    position: relative;
+    background: linear-gradient(to right, rgba($color: #C8C3FD, $alpha: 0.22), #FFFFFF);
+
+    .bg {
+      position: absolute;
+      bottom: 0;
+      left: 4rpx;
+      font-size: 0;
+
+      .img {
+        width: 206rpx;
+        height: auto;
+      }
+    }
+
+    .main {
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .left {
+      flex: 1;
+      position: relative;
+    }
+
+    .right {
+      padding: 16rpx 18rpx 14rpx 0;
+      box-sizing: border-box;
+
+      .img {
+        // $w: 225rpx;
+        // width: 225rpx;
+        // height: calc(#{$w} * 1184 / 750);
+        width: 184rpx;
+        height: 290rpx;
+      }
+    }
+  }
+</style>

pages_order/thesis/thesisInfoView.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="info">
+    <view class="title" v-if="data.title">{{ data.title }}</view>
+    <view class="process" v-if="data.process">
+      <uv-parse :content="data.process"></uv-parse>
+    </view>
+    <view class="content" v-if="data.shortTitle">
+      {{ data.shortTitle || '' }}
+    </view>
+    <view class="flex tag" v-if="data.tags">
+      <view class="tag-item" v-for="(item, index) in data.tags" :key="index">
+        {{ item }}
+      </view>
+    </view>
+    <view class="btn">
+      <image class="btn-img" src="@/static/image/icon-detail.png" mode="widthFix"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {}
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .info {
+    padding: 30rpx 24rpx 24rpx 24rpx;
+    .title {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #6851A7;
+    }
+
+    .process {
+      margin-top: 7rpx;
+      display: inline-block;
+      font-size: 0;
+      color: #FFFFFF;
+      padding: 3rpx 16rpx;
+      background: #6851A7;
+      border-radius: 13rpx;
+    }
+
+    .content {
+      margin-top: 24rpx;
+      font-size: 18rpx;
+      font-weight: 500;
+      color: #3E3A39;
+    }
+
+    .tag {
+      margin-top: 16rpx;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      column-gap: 12rpx;
+      row-gap: 8rpx;
+
+      &-item {
+        padding: 4rpx 8rpx;
+        font-size: 16rpx;
+        font-weight: 700;
+        color: #FFFFFF;
+        background: rgba($color: #6851A7, $alpha: 0.59);
+        border-radius: 10rpx;
+      }
+    }
+
+    .btn {
+      margin-top: 16rpx;
+      width: 190rpx;
+      height: auto;
+      &-img {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+</style>

uni.scss

@@ -29,7 +29,7 @@ $uni-text-color-disable:#c0c0c0;
 
 /* 背景颜色 */
 $uni-bg-color:#FAFBFC;
-$uni-bg-color-grey:#F5F5F5;
+$uni-bg-color-grey:#EAEAEA;
 $uni-bg-color-hover:#f1f1f1;//点击状态颜色
 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色