feat: page-index;

common.scss

@@ -44,4 +44,29 @@
 	min-height: 100vh;
 	background-color: $uni-bg-color;
 	position: relative;
+	font-family: PingFang SC;
+	line-height: 1.4;
+}
+
+.flex {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.btn {
+	width: auto;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	line-height: 1.4;
+	border: none;
+	background: none;
+}
+.btn:after {
+	border: none;
 }

pages.json

@@ -40,6 +40,9 @@
 			},
 			{
 				"path": "auth/loginAndRegisterAndForgetPassword"
+			},
+			{
+				"path": "search/index"
 			}
 		]
 	}],

pages/index/index.vue

@@ -1,5 +1,52 @@
 <template>
   <view class="page__view">
+    <view class="bg"></view>
+
+    <view class="main">
+
+			<!-- 搜索栏 -->
+			<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="section swiper">
+				<uv-swiper :list="bannerList" keyName="image" indicator indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="239rpx"></uv-swiper>
+			</view>
+
+      <view class="section card" v-for="(group, gIdx) in list" :key="group.id">
+        <view class="card-header">
+          <view class="card-header-title">{{ group.label }}</view>
+          <view class="card-header-tag">JGYT</view>
+        </view>
+
+        <view class="card-content">
+          <template v-if="gIdx === 0">
+            <view class="card-item card-row" v-for="item in group.children" :key="item.id" @click="jumpToCategory(item)">
+              <view class="flex info">
+                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
+                <view class="info-label">{{ item.label }}</view>
+              </view>
+              <button class="btn">查看</button>
+            </view>
+          </template>
+          <template v-else>
+            <view class="card-box">
+              <view class="card-item info" v-for="item in group.children" :key="item.id" @click="jumpToCategory(item)">
+                <image class="info-icon" :src="item.icon" mode="widthFix"></image>
+                <view class="info-label">{{ item.label }}</view>
+              </view>
+            </view>
+          </template>
+        </view>
+
+      </view>
+
+    </view>
 
 		<tabber select="home" />
   </view>
@@ -12,9 +59,242 @@
 		components: {
       tabber,
     },
+    data() {
+      return {
+				keyword: '',
+        bannerList: [],
+        list: [],
+      }
+    },
+    onLoad() {
+      this.fetchBanner()
+      this.getData()
+    },
+    methods: {
+      getData() {
+        // todo
+        
+        this.list = [
+          {
+            id: '001',
+            label: '导航检索',
+            children: [
+              { id: '0011', label: 'AHCI', icon: '/static/image/temp-4.png', },
+              { id: '0012', label: 'EI会议', icon: '/static/image/temp-9.png', },
+              { id: '0013', label: 'EI源刊', icon: '/static/image/temp-10.png', },
+              { id: '0014', label: 'ESCI', icon: '/static/image/temp-5.png', },
+              { id: '0015', label: 'SCI', icon: '/static/image/temp-6.png', },
+              { id: '0016', label: 'Scoupus', icon: '/static/image/temp-7.png', },
+              { id: '0017', label: 'SSCI', icon: '/static/image/temp-8.png', },
+            ],
+          },
+          {
+            id: '002',
+            label: '精选内容',
+            children: [
+              { id: '0021', label: 'AHCI', icon: '/static/image/temp-4.png', },
+              { id: '0022', label: 'EI会议', icon: '/static/image/temp-9.png', },
+              { id: '0023', label: 'AHCI', icon: '/static/image/temp-4.png', },
+              { id: '0024', label: 'EI会议', icon: '/static/image/temp-9.png', },
+            ],
+          },
+          {
+            id: '003',
+            label: '精选内容',
+            children: [
+              { id: '0031', label: 'AHCI', icon: '/static/image/temp-4.png', },
+              { id: '0032', label: 'EI会议', icon: '/static/image/temp-9.png', },
+              { id: '0033', label: 'AHCI', icon: '/static/image/temp-4.png', },
+              { id: '0034', label: 'EI会议', icon: '/static/image/temp-9.png', },
+            ],
+          },
+        ]
+      },
+			search() {
+        uni.navigateTo({
+					url: '/pages_order/search/index?search=' + this.keyword
+				})
+				this.keyword = ''
+			},
+			// 获取轮播图
+			async fetchBanner() {
+				try {
+          // todo
+					// this.bannerList = (await this.$fetch('queryBannerList'))?.records
+
+          this.bannerList = [
+            { image: '/static/image/temp-1.png' },
+            { image: '/static/image/temp-2.png' },
+            { image: '/static/image/temp-3.png' },
+            { image: '/static/image/temp-2.png' },
+          ]
+
+				} catch (err) {
+
+				}
+			},
+      jumpToCategory(obj) {
+        const { id, label } = obj
+        
+        uni.navigateTo({
+					url: `/pages_order/search/index?cid=${id}&title=${label}`
+				})
+      },
+    },
   }
 </script>
 
 <style scoped lang="scss">
+  .bg {
+    width: 100%;
+    height: 438rpx;
+    background-image: linear-gradient(#4883F9, #4883F9, #4883F9, #FCFDFF);
+  }
+
+  .main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 192rpx 0 182rpx 0;
+  }
+
+  .section {
+    margin: 0 18rpx 0 18rpx;
+  }
+
+	.search {
+    width: calc(100% - 20rpx * 2);
+		background-color: #FFFFFF;
+		border-radius: 37rpx;
+		padding: 13rpx 0 13rpx 18rpx;
+    box-sizing: border-box;
+		display: flex;
+		align-items: center;
+
+		/deep/ .uv-search__action {
+			color: $uni-color;
+			padding: 10rpx 18rpx;
+		}
 
+    &-icon {
+      width: 26rpx;
+      height: auto;
+    }
+	}
+
+  .swiper {
+    margin-top: 29rpx;
+    margin-bottom: 26rpx;
+    border-radius: 25rpx;
+    overflow: hidden;
+    
+    /deep/ .uv-swiper-indicator__wrapper__dot {
+      width: 15rpx;
+      height: 15rpx;
+    }
+
+    /deep/ .uv-swiper-indicator__wrapper__dot--active {
+      width: 15rpx;
+    }
+  }
+
+  .card {
+    margin-bottom: 35rpx;
+    width: calc(100% - 20rpx * 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);
+
+    &-header {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 46rpx 0 17rpx 33rpx;
+      overflow: hidden;
+
+      &-title {
+        font-size: 42rpx;
+        font-weight: 800;
+        color: #000000;
+      }
+
+      &-tag {
+        position: absolute;
+        top: -40rpx;
+        right: 12rpx;
+        font-size: 156rpx;
+        font-weight: 800;
+        color: rgba(255,255,255,0.3);
+      }
+    }
+
+    &-content {
+      padding: 0 30rpx;
+      box-sizing: border-box;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      column-gap: 50rpx;
+      padding: 26rpx 28rpx;
+      box-sizing: border-box;
+      background: #f3f6fd;
+      border-radius: 28rpx;
+      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
+    }
+
+    
+    .info {
+
+      &-icon {
+        width: 80rpx;
+        height: auto;
+      }
+
+      &-label {
+        font-size: 32rpx;
+        font-weight: 400;
+        color: #000000;
+      }
+    }
+
+    &-row {
+      justify-content: space-between;
+      padding: 15rpx 35rpx;
+
+      & + & {
+        margin-top: 33rpx;
+      }
+
+      .info {
+        column-gap: 33rpx;
+      }
+
+      .btn {
+        padding: 7rpx 30rpx;
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #4883F9;
+        background: #FFFFFF;
+        border-radius: 27rpx;
+      }
+    }
+
+    &-box {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: 34rpx;
+      row-gap: 26rpx;
+
+      .info {
+        column-gap: 50rpx;
+      }
+    }
+  }
 </style>

pages_order/search/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <view class="page__view">
+    
+		<!-- 导航栏 -->
+		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" bgColor="#4883F9" color="#FFFFFF" />
+
+    
+    <view class="top">
+      <!-- 搜索栏 -->
+      <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>
+
+    <view class="main">
+      <view class="flex card" v-for="item in list" :key="item.id">
+        <view class="left">
+          <view class="title">{{ item.title }}</view>
+          <view class="content">{{ item.content }}</view>
+        </view>
+        <view class="right">
+          <image class="img" :src="item.image" mode="aspectFill"></image>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+	import mixinsList from '@/mixins/list.js'
+
+  export default {
+		mixins: [mixinsList],
+    data() {
+      return {
+        title: '搜索',
+				keyword: '',
+				queryParams: {
+					pageNo: 1,
+					pageSize: 10,
+					title: null,
+					cid: null,
+				},
+        // todo
+        mixinsListApi: '',
+      }
+    },
+    onLoad({ search, cid, title }) {
+      if (search) {
+        this.keyword = search
+				this.queryParams.title = search
+			}
+      if (cid) {
+				this.queryParams.cid = cid
+			}
+      if (title) {
+        this.title = title
+      }
+      
+      this.getData()
+    },
+    methods: {
+      search() {
+        this.queryParams.pageNo = 1
+        this.queryParams.pageSize = 10
+				this.queryParams.title = this.keyword
+        this.getData()
+      },
+      // todo: delete
+      getData() {
+
+        this.list = [
+          {
+            id: '001',
+            title: '建筑学',
+            content: `
+              <h>建筑学</h>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+            `,
+            image: '/static/image/temp-1.png',
+          },
+          {
+            id: '002',
+            title: '建筑学',
+            content: `
+              <h>建筑学</h>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+              <p>文字说明</p>
+            `,
+            image: '/static/image/temp-2.png',
+          },
+        ]
+
+        this.getDataThen(this.list)
+      },
+      getDataThen(list) {
+        const reg = /\<[^>]*\>/g
+
+        this.list = list.map(item => {
+          const content = item.content.replace(reg, '')
+
+          return { ...item, content }
+        })
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .page__view {
+    background: $uni-bg-color-grey;
+  }
+
+  .top {
+    padding: 49rpx 0 17rpx 0;
+    box-sizing: border-box;
+    background: $uni-color;
+  }
+
+	.search {
+    margin: 0 19rpx;
+    width: calc(100% - 20rpx * 2);
+		background-color: #FFFFFF;
+		border-radius: 37rpx;
+		padding: 13rpx 0 13rpx 18rpx;
+    box-sizing: border-box;
+		display: flex;
+		align-items: center;
+
+		/deep/ .uv-search__action {
+			color: $uni-color;
+			padding: 10rpx 18rpx;
+		}
+
+    &-icon {
+      width: 26rpx;
+      height: auto;
+    }
+	}
+
+  .main {
+    padding: 17rpx;
+    box-sizing: border-box;
+  }
+
+  .card {
+    background: #ffffff;
+    border-radius: 20rpx;
+    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
+
+    & + & {
+      margin-top: 27rpx;
+    }
+
+    .left {
+      flex: 1;
+      padding: 13rpx 32rpx 35rpx 20rpx;
+      box-sizing: border-box;
+
+      .title {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #000000;
+      }
+
+      .content {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #0F2248;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display:-webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp:7; //显示的行
+      }
+    }
+
+    .right {
+      padding: 23rpx 17rpx 23rpx 0;
+      box-sizing: border-box;
+
+      .img {
+        width: 225rpx;
+        height: 325rpx;
+      }
+    }
+  }
+
+</style>

uni.scss

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