教育教学样式开发

common/styles/global/components.scss

@@ -304,5 +304,42 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
 		 span{margin: 0;padding: 0;}
 		 p{margin: 16rpx 0;padding: 0;}
 	}
+	uni-video{margin: 0 auto;display: block;margin-bottom: 24rpx;}
 	.dljt-pdf-box{}
+}
+
+/* 分类 */
+.dljt-classify-box{
+  .classify-item{display:inline-block;font-size: 28rpx;border: 1rpx solid #ccc;color: #333;padding:12rpx 16rpx;margin-right: 16rpx;cursor: pointer}
+  .active{background-color: #00369a;color: #fff;border: 1rpx solid #00369a;}
+}
+
+/* 链接模块*/
+.dljt-link-box{
+	margin: 42rpx 0;
+  .link-item-box{
+    margin-bottom: 16rpx;
+    a{
+		color: #00369a;display: inline-block;vertical-align: middle;margin-right: 10rpx;margin-left: 16rpx;
+		line-height: 30rpx;text-decoration: none;padding: 12rpx 0;vertical-align: top;}
+    icon{
+      width: 46rpx;height: 46rpx;@include dljt-no-repeat-cover;vertical-align: top;
+      background-image: url("@/static/images/common/link-icon.png");}
+    .link-text{line-height: 40rpx;text-decoration: underline;padding: 6rpx 0;}
+  }
+}
+
+/* 表格 */
+.dljt-table-box{
+  margin: 16rpx 0;border: 1rpx solid #ccc;font-size: 28rpx;
+  .table-th-row,.table-td-row{
+    display: flex;
+	>view{display: flex;align-items: center;padding: 16rpx;}
+    view{box-sizing: border-box;border-right: 1rpx solid #ccc;}
+    view:last-child{border-right: 0;}
+    view.item-center{text-align: center}
+    .table-btn{color: #1a6ac3;border-bottom: 1rpx solid #1a6ac3;cursor: pointer}
+  }
+  .table-th-row{background-color: #1a6ac3;color: #fff;text-align:center;}
+  .table-td-row{background-color: #fff;color: #333;border-top: 1rpx solid #ccc;}
 }

pages/zsjyShengxue/zsjyShengxue.vue

@@ -14,27 +14,33 @@
 				</view>
 				<view class="dljt-detail-box">
 					<view class="dljt-editor-box">
-						<view v-for="item in data.list" :key="item.title" @click="handleSelect(item)">{{item.title}}</view>
+						<view class="dljt-classify-box">
+							<view class="classify-item" v-for="item in data.list" :key="item.title" @click="handleSelect(item)">{{item.title}}</view>
+						</view>
 						<!-- 富文本 -->
 						<MtaMpHtml class="dljt-editor-box" :content="data.activeData.content" ></MtaMpHtml>
 						
 						<!-- 链接 -->
-						<view>
-							<view v-for="cItem in data.activeData.link">
-								<a :href="cItem.url">{{cItem.name}}{{cItem.url}}</a>
+						<view class="dljt-link-box">
+							<view class="link-item-box" v-for="cItem in data.activeData.link">
+								<icon></icon>
+								<a :href="cItem.url">{{cItem.name}}</a>
+								<a class="link-text" :href="cItem.url">{{cItem.url}}</a>
 							</view>
 						</view>
 						<!-- table -->
-						<view>
-							<view>
-								<view>序号</view>
-								<view>资料名称</view>
-								<view>下载</view>
+						<view class="dljt-table-box">
+							<view class="table-th-row">
+								<view style="width: 15%">序号</view>
+								<view style="width: 60%">资料名称</view>
+								<view style="width: 25%">下载</view>
 							</view>
-							<view v-for="(ccIte,index) in data.activeData.ziliao">
-								<view>{{index+1}}</view>
-								<view>{{ccIte.name}}</view>
-								<view @click="handleDownFile(ccIte)">文件下载</view>
+							<view class="table-td-row" v-for="(ccIte,index) in data.activeData.ziliao">
+								<view style="width: 15%" class="item-center"><view>{{index+1}}</view></view>
+								<view style="width: 60%"><view>{{ccIte.name}}</view></view>
+								<view style="width: 25%">
+									<a class="table-btn" @click="handleDownFile(ccIte)" >文件下载</a>
+								</view>
 							</view>
 						</view>
 					</view>

pages/zsjyXiaoqihezuo/zsjyXiaoqihezuo.vue

@@ -13,19 +13,21 @@
 					<view class="breadcrumb-active">校企合作</view>
 				</view>
 				<view class="dljt-detail-box">
-					<view class="dljt-editor-box">
-						<view>
-							<view>序号</view>
-							<view>类别</view>
-							<view>企业名称</view>
-							<view>企业介绍</view>
-						</view>
-						<view v-for="(item,index) in data.list">
-							<view>{{index+1}}</view>
-							<view>{{item.leibie}}</view>
-							<view>{{item.title}}</view>
-							<view @click="handleClick(item)">查看详情</view>
+					<view class="dljt-table-box">
+						<view class="table-th-row">
+							<view style="width: 15%">序号</view>
+							<view style="width: 15%">类别</view>
+							<view style="width: 46%">企业名称</view>
+							<view style="width: 24%">企业介绍</view>
 						</view>
+						<view class="table-td-row" v-for="(item,index) in data.list">
+							<view style="width: 15%"><view>{{index+1}}</view></view>
+							<view style="width: 15%"><view>{{item.leibie}}</view></view>
+							<view style="width: 46%"><view>{{item.title}}</view></view>
+							<view style="width: 24%" @click="handleClick(item)">
+								<a class="table-btn">查看详情</a>
+							</view>
+					</view>
 					</view>
 				</view>
 			</view>

pages/zsjyZhuanyejieshao/zsjyZhuanyejieshao.vue

@@ -14,7 +14,9 @@
 				</view>
 				<view class="dljt-detail-box">
 					<view class="dljt-editor-box">
-						<view v-for="item in data.list.data" :key="item.title" @click="handleSelect(item.title)">{{item.title}}</view>
+						<view class="dljt-classify-box">
+							<view class="classify-item" v-for="item in data.list.data" :key="item.title" @click="handleSelect(item.title)">{{item.title}}</view>
+						</view>
 						<!-- 富文本 -->
 						<MtaMpHtml class="dljt-editor-box" v-show="item.title == data.activeTitle" v-for="item in data.list.data" :content="item.content" ></MtaMpHtml>
 					</view>