白条专区

components/BottomBar/BottomBar.vue

+<template>
+	<view>
+		<view class="bottom-bar">
+			<view @click="jumpPhpPage()">
+				<i class="home_icon"></i>
+				<text>首页</text>
+			</view>
+			<view @click="jumpPhpPage('app=category')">
+				<i class="cate_icon"></i>
+				<text>分类</text>
+			</view>
+			<view @click="jumpPhpPage('app=cart')">
+				<i class="cart_icon"></i>
+				<text>购物车</text>
+			</view>
+			<view @click="jumpPhpPage('app=member')">
+				<i class="shop_icon"></i>
+				<text>我的商城</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { php } from '../../common/host.js';
+	export default {
+		data() {
+			return {
+				php: php
+			}
+		},
+		methods: {
+			jumpPhpPage(url) {
+				let link = url ? `${php}${url}` : php;
+				window.location.href =  link;
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.bottom-bar {
+		display: flex;
+		justify-content: space-around;
+		border-top: 1px solid #dcdcdc;
+		position: fixed;
+		width: 100%;
+		left: 0;
+		bottom: 0;
+		background: #fff;
+		i {
+			display: block;
+			width: 44rpx;
+			height: 44rpx;
+			margin: 0 auto;
+			position: relative;
+			top: 14rpx;
+		}
+		.home_icon {
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABSlBMVEUAAAAlFhQUDgkTDwpfX18SDQoSDQcwMDAWDwkZFQ0cEBAIAQQIAgMTDgkUDgoVDQ0TDwkIAQQhGQskGwsnHQuuhCESEQwTDggIAQMUDwjjryjhrCiqgiATDgr//5UTDgingR8TDwgIAQQIAQQJAQT6wC0TDwgJAgP7wSz6wC3+wjAZFQv/1Uf6wCwTDwn5wCwJAQMaEgkUDgj5wCyYdR0TDglKORAUDgkTDgkOCQf5wS0IAgQJAwT7wC77wi0QDggYEAwgICD1uyvpsisJAQP6wCz6wC0TDwnXpSf5wC0IAQTAkyOfeR4TDwkUDwkJAQS1iyGxiSH6vy0wJA07LBB0WRgIAQTfrChhSRT5vy35wC0JAgP6vy0UDgkUDwn5wC35wS0UEAn6wCwUDgnHmCP8wCz7wjAUDwpANQv/yDf/0S4TDgj6vywIAQO/pr9xAAAAa3RSTlMADGNyAnQ5BR0TEL6dyUIg7djS0M7NJvz59unnzGoB+Mu7uLSsnpWRdGYsFwb07+bl3tjVx8fBpZ+Eg31URT4tHwj57+7r6uPe3dnU0tLR0dDPzMjEwMC/v7SrpZSNiomHcG1YV1E7MxgOC7YxrVcAAAHjSURBVDjL1dRXc5tAEMDxBSMksMDESdQSSbEk1yiOa2zHLU7vvTf3uvD9X73HMVoQZ439Zv+fgPvNaWc4AVe7rKZqw1BQ10F1xYVCt60W8cwmzaQ1sVeelcBihqWcptmURR3t/ahUKreoN19oaSS5cfSAq435sseDiGUbuEXEugVd7Uf6IyJW+bFdRlyAVA8jPY34jp9uI6KZxu37En9LLM8gvmeT2vpJGXERoiweKtmBL/uKOGmAbJ3wXRU+ifDbGHARZ0BZNHSFcIGxo8affVkMm4helsVof1hLA/gl7csYHqDrDOPXQVgpBzAs8QMCGsiMF4hFnd99KcR9dLkV2p9khzrLu0jxILqweaB2hP1Ei/VD6DTCWLQUBI3wdlXgm7SoA6cnMTSn5Ijt5xEe6MIGcPlrIBu7CK4N98KWzdgg0p7tgT80sx08+nRDDHKbFh914RqEIPi+LnGuFTQAYFyJQbYcBM3l/qlMqxTkxY9shjinxlD4I99gwwSq9qoXpjRzZcW1gRJT+HdUWNXEvfPjtWe+EnuKbeUJnYv+VIzLepwdT6yO/531O6e5biQ+zbG7td80KDdX5NPMGX1DjuPMzw9S10U3RNNIuSn8D8/qP6TyUJ1XBcUUyTIy3dXgknUK0SzgDYs5mO8AAAAASUVORK5CYII=)no-repeat center center;
+			background-size: 100%;
+		}
+		.cate_icon {
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABF1BMVEUAAAAcHBwUDwgUDgkTDgkTDggTDggUDggTDwkTDwk+Pj4cFAkUDggUDgkTDgkUDgkUDwkUDgkWEQsbFQ07LQ49Lw8TDwgUDwkTDwoWEgkUDwoTDggTDwgTDggTDwgTDgkUDggTDgoUDwoVDgslGwsdFgkUDggTDggTDwkUDwgUEQo0KQ0UEAocGA0aEgkVFRUTDwkTDgg/MA9AMQ9AMg8VDwgTDwkVEAoVEAsUEAkVFQojEREtIQsUDwguIw04Kw4UDwlCMhBBMQ8UDwkUDghAMBBAMRE+Lg4VDgk4KxAXDw8TDgj5vyx4WxdvVRYXEQgqHwwgGQryuivmsCiCYxlNOxHRoCbGmCS2jCKpgR9sUxY6LA4tIg3/BqV7AAAAS3RSTlMACJnD5fzYtKnwBBv36a+Pc1ctEtfOnZSEODL58vG6oX5pZ0b+/tzU0V1LPz8nHQvuyMG3kXp3YmBQFw709PPfwaOdjIB/eG9tTiLqLyxHAAAB5ElEQVQ4y+WU13KbQBhGkQUqCIiMbHXJ6sVWcY0dO70nRwmRS/r7P0eIWLOLx+YumczkXAD/t2fZZfhB+19IjEsZn2I+F0a5w/1Nn4M3iRtuJYWg3hHRqz6CxztR1/itZbNZAyivomcAy+WyD3iqnUhhlFfrz9dtjKp/sePR+3a+8Lm49Hio7OQYysoijn/agC8LwSW8lnIRCmGRxPaPPa4W11zAvpQd7MhM/wjfFyE9NuR4Gl0Wa0L+KOVPf0fOYJkx8rnHppRbsB0jf4XnUp5a6O6d8uefeFNNch9qzdK9FUMh//gQcOXBoaZglpAIWeHA1CJMmo/ukPtP3t3W0iHR4o+Qc2fmLXEh7zxNXiPMkg7sFqc33W0dhVU0tggw8lG3C9RSAdlA7gCptXxpBLxU3TMd660ZeYNVAyu443EDuorchmBAymk4kcuOFHkLzqLyqUFTHXbj+vkBtEUtihi5DZUwmUE5Tj5RO7wKR3HyBFph0oF19QGNhDKz4ffsLnZB+V8V1N6XU3MNksGX5gQ3MIuwpklmdeyJcJMw9s/zIQy7Cc2s7EHjVFPoAKOMT9KC9Cp6PwCMQQ2AF5rKkR8KHLG/QoaAvXqwS4m7Ncj66E0ldltOMl2ualU7Ksczd7V/iV/8C5Mn329uRwAAAABJRU5ErkJggg==)no-repeat center center;
+			background-size: 100%;
+		}
+		.cart_icon {
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAA9lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD6wi0AAAAAAAAAAAAAAAAAAAAAAAAAAAAKCAEAAAAAAAAAAAAAAAADAwAAAAAAAAAAAAD/xTAAAAD/1DoAAAAAAAAAAAAAAAD7wyz8xC77xC8uIwgWEQNTPw5GNgz7wiwmHgcAAAAAAAD7wS0AAAD7wSwAAAAAAAAAAAD6wS38wy37wS0AAAD/xjD//0AAAAD6wSxQPg54XRUuIwg4KwlaRQ9pURLyuirstinqtCnVpCXDliKyiR+NbBhyWBQzKAkyJggBVTZuAAAAQHRSTlMAQwziMyEYFvf9B6Sj5sQD25plKc+Ubkck/vbwuK6pXFEvJxAL7Na/sX9NPP7+/fzt5+HGtZqQi4mDa1U+OB0ECOMiggAAAVhJREFUOMvN1OdOwzAUhmG3lKQ2DQltuvde7L35ApQ97/9mCJGKTl278h8Er5QfR+dRZCmK2Z8nXGOa9rljGdoqwhqG7wVQ7seNbLsLXjc9ch44YKblgBibya1Xe0tyXoSyQGHGFnyoGrCwFcCm1nKUltdVuAZ0c5m4nGAKnAfUH4hgOjaYKfZQco1xGT6LEglam0WlZnESqyyqApq3GFdB83+wpcLuMk1osarfxK3xaFyT8c7ad4fD07Pz1mWnc8VYpzUa7m8HYXcyngRRb7fT1sPnPQgW4U/QikpcmuKXG9qrEjvYCPRNAEFwH3jW2scidqVfckuL74EsxcIDNp+U9CG0ZZvRYgD4x/V8kyKAtHw3cGg7YnKJiprzvbzySkvE5ruw52Eh3WRS2mWzBN7Q2UQSnB4lC6AiI7ockPkEQE2HjwGkyGz34GR02PKkpZsRTJsIl/+qL/pUf+OcGQ4QAAAAAElFTkSuQmCC)no-repeat center center;
+			background-size: 100%;
+		}
+		.shop_icon {
+			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAA3lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD7wiwAAAAAAAAAAAD7wi0AAAAAAAAAAAD/yTL6wiwAAAD7wSwAAAAAAAD6wi0AAAAAAAAAAAD8wi0AAAAAAAAAAAD/2U77wiz6wi0AAAD7wi38wi37wSz6wyz8wy78wiz7wS7/xC//xjkAAAD7wSyT/PkuAAAASHRSTlMA4bj75ncK9vGbIstBEwfZ1KGBamNfNCUD3pOOilJNQy8pHQ7s6L6xq3x8cD4S1M68taWhl4dzT0g5NwbxzMK0k4RuXktCKwmQ/edfAAABrUlEQVQ4y82U2VbiQBCGGzuBJBCWJAQBARFRFtFxm1Fn37+8/wtN4gyDJ6mOXvpdpE/V+XNS/VdV1GulOuna4ch7ibRxWuORtl1V5RxdssMalWrvLdCX0b13OB5YwO2+WXtYg73ptnQ7jYZGrV+B4EkcW9A1iW9gmP+S48vanqaeqzGEA1l8C5Ncar/FsXzHNpVCzoYzsXFwU/QH3oolS/mqwb0HiIpZTUcSe2Cnx3L+6298/fG9UjODHU1w0+Nrcr7JwmUyT8UxrJVEHSt9/j5P5ssf398kybs0CiAWxSvIxmyT6lI+ZNpmBcswnjVaTZXy88vn62+bfzavlMwBuas3NJZpA2ZtcJu7+M6BsTLhHUN9215/oDMzzfRawEUQdbthtop6rcrwXc1/2mfP7HadHc6qbL9npwD9xVWns/ikAWtSWrF2p9uKogrosMwL7+m0BIIfsssZYwctOn2FMLoNjXNU1MZwIexmCG4xe4KO5cHVU2FPFrLzwq6soaFE+rSKVThKZgi9wvsnBvEI7nKpGtZegcduPhR+pVWNROaxPxjkJyToVyQi9Rr5A0ULTH4PXjfXAAAAAElFTkSuQmCC)no-repeat center center;
+			background-size: 100%;
+		}
+		text {
+			font-size: 20rpx;
+			color: #6e6e6e;
+		}
+	}
+</style>

components/uni-pagination/uni-pagination.vue

@@ -103,6 +103,9 @@
 					type: e,
 					current: this.currentIndex
 				})
+			},
+			parentsChangeCurrent(val) {
+				this.currentIndex = val;
 			}
 		}
 	}

main.js

 import Vue from 'vue'
 import App from './App'
+import { php } from './common/host.js';
 
 Vue.config.productionTip = false
 
 // 加入购物车
-
+let isLogin = 0;
 function addCart(spec_id, quantity) {
+	if(!isLogin) {
+		uni.showToast({
+		    title: '请先登录',
+		    duration: 2000,
+			icon: 'none'
+		});
+		setTimeout(() => {
+			window.location.href = php;
+		}, 2000);
+		return
+	}
 	uni.request({
 		url: '/uni/api//credit_goods/add_cart',
 		method: 'post',
@@ -15,7 +27,17 @@ function addCart(spec_id, quantity) {
 			quantity: quantity
 		},
 		success: (res) => {
-			console.log(res)
+			let msg = '';
+			if(res.data.code == 0) {
+				msg = '已加入购物车'
+			} else {
+				msg = res.data.messages
+			}
+			uni.showToast({
+			    title: msg,
+			    duration: 2000,
+				icon: 'none'
+			});
 		}
 	})
 }
@@ -26,11 +48,13 @@ function addCart(spec_id, quantity) {
 		type:'get',
 		success: (res) => {
 			Vue.prototype.$isLogin = res.data.data;
+			isLogin = res.data.data;
 		}
 	});
 })()
 
 Vue.prototype.$addCart = addCart;
+Vue.prototype.$noGoodsImg = '/static/common/shangpinmorentu@2x.png';
 
 App.mpType = 'app'
 

manifest.json

@@ -89,7 +89,7 @@
             "disableHostCheck": true,
             "proxy": {
                 "/uni/api": {
-                    "target": "http://192.168.50.133:6564/",
+                    "target": "http://192.168.124.33:6564/",
                     "changeOrigin": true,
                     "secure": false,
                     "pathRewrite":{"^/uni/api":"api"}

pages.json

@@ -7,7 +7,10 @@
 			}
 		},
 		{
-			"path": "pages/category/Category"
+			"path": "pages/category/Category",
+			"style": {
+				"enablePullDownRefresh": true
+			}
 		},
 		{
 			"path": "pages/web/Web"
@@ -17,6 +20,7 @@
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#fbfbfb"
+		"backgroundColor": "#fbfbfb",
+		"app-plus": {"titleNView": false}
 	}
 }

pages/category/Category.vue

@@ -9,15 +9,15 @@
 				<text v-for="(item, index) in cate_list" :key="index" :class="{act: tabIndex === index}" @click="changeTabs(index, item.cate_id)">{{item.cate_name}}</text>
 			</view>
 		</view>
-		<view class="goods_box">
+		<view class="goods_box" v-if="goods_list">
 			<view class="goods_item" v-for="(item, index) in goods_list" :key="index">
-				<image :src="item.default_image"></image>
+				<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
 				<view class="goods_item_info">
 					<p>{{item.goods_name}}</p>
 					<p>{{item.goods_subname}}</p>
 					<view class="goods_tag">
 						<text>限时免息</text>
-						<text>9个月账期</text>
+						<!-- <text>9个月账期</text> -->
 					</view>
 					<p class="price">
 						<text>{{isLogin ? '￥' : ''}}</text>{{isLogin ? item.price : '登录显示价格'}}
@@ -26,24 +26,30 @@
 				<i class="cart_icon" @click="addCart(item.spec_id, 1)"></i>
 			</view>
 			<view class="pageBox">
-				<uni-pagination :total="page['total']" show-icon="true" @change="changePage"></uni-pagination>
+				<uni-pagination ref="pagination" :total="page['total']" current="1" show-icon="true" @change="changePage"></uni-pagination>
 			</view>
 		</view>
+		<view class="nodata" v-else>暂无此类商品</view>
+		<BottomBar />
 	</view>
 </template>
 
 <script>
 	import uniIcons from "@/components/uni-icons/uni-icons.vue";
 	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
+	import BottomBar from "@/components/BottomBar/BottomBar.vue";
+	import { php, go } from '../../common/host.js';
 	export default {
 		data() {
 			return {
 				goods_list: [],
 				page: {
-					total: 0
+					total: 0,
+					current: 1
 				},
 				cate_list: [],
 				firsr_cate_id: '',
+				cate_id_2: '',
 				tabIndex: -1,
 				params: {},
 				keyword: '',
@@ -58,9 +64,20 @@
 			this.params = option;
 			this.getData(option)
 		},
+		onPullDownRefresh() {
+			if(this.keyword) {
+				this.search(this.keyword, uni.stopPullDownRefresh);
+				return
+			} else if (this.cate_id_2) {
+				this.changeTabs(this.tabIndex, this.cate_id_2, uni.stopPullDownRefresh);
+			} else {
+				this.changeTabs(this.tabIndex, this.firsr_cate_id, uni.stopPullDownRefresh);
+			}
+		},
 		components: { 
 			uniIcons,
-			uniPagination
+			uniPagination,
+			BottomBar
 		},
 		methods: {
 			goBack() {
@@ -81,15 +98,17 @@
 					}
 				});
 			},
-			changeTabs(index, cate_id) {
+			changeTabs(index, cate_id, cb) {
 				if(index == -1) {
 					var params = {
 						cate_id_1: cate_id+''
 					};
+					this.cate_id_2 = '';
 				} else {
 					var params = {
 						cate_id_2: cate_id+''
 					};
+					this.cate_id_2 = cate_id+'';
 				}
 				this.tabIndex = index;
 				uni.request({
@@ -97,6 +116,7 @@
 					method: 'POST',
 					data: {
 						...params,
+						goods_name: this.keyword,
 						current: 1,
 						pageSize: 10
 					},
@@ -106,6 +126,7 @@
 							  { page } = res.data;
 						this.goods_list = credit_goods_list;
 						this.page = page;
+						!!cb && cb();
 					}
 				});
 			},
@@ -125,7 +146,7 @@
 					}
 				});
 			},
-			search(keyword) {
+			search(keyword, cb) {
 				uni.request({
 					url: '/uni/api/credit_goods/get_credit_second_goods',
 					method: 'POST',
@@ -140,11 +161,18 @@
 							  { page } = res.data;
 						this.goods_list = credit_goods_list;
 						this.page = page;
+						!!cb && cb();
+						this.tabIndex = -1;
+						this.$refs.pagination.parentsChangeCurrent(1);
 					}
 				});
 			},
 			addCart(spec_id, quantity) {
 				this.$addCart(spec_id, quantity)
+			},
+			jumpPhpPage(url) {
+				let link = url ? `${php}${url}` : php;
+				window.location.href =  link;
 			}
 		}
 	}
@@ -154,6 +182,11 @@
 	.search_box {
 		background: url(../../static/category/2641581405726_.pic.png) no-repeat;
 		background-position: 100% 100%;
+		position: fixed;
+		width: 100%;
+		left: 0;
+		top: 0;
+		z-index: 10;
 		i {
 			display: inline-block;
 			width: 60rpx;
@@ -211,8 +244,13 @@
 			display: none;
 		}
 	}
+	.nodata {
+		text-align: center;
+		padding: 40rpx 0;
+	}
 	.goods_box {
-		padding-bottom: 80rpx;
+		padding-bottom: 118rpx;
+		margin-top: 174rpx;
 		.pageBox {
 			text-align: center;
 		}
@@ -257,7 +295,7 @@
 					-webkit-box-orient: vertical;
 					overflow: hidden;
 					text-overflow: ellipsis;
-					font-size: 11rpx;
+					font-size: 22rpx;
 					color: #7C7C7C;
 				}
 				.goods_tag {

pages/index/index.vue

@@ -22,8 +22,8 @@
 		</view>
 		<view class="backimg">
 			<view class="main_content">
-				<view class="banner"></view>
-				<view class="part_one">
+				<view class="banner" style="display: none;"></view>
+				<view class="part_one" style="margin-top: 20px;">
 					<view>
 						<text class="text">白条商品</text>
 						<i></i>
@@ -37,8 +37,10 @@
 					</view>
 				</view>
 				<view class="part_two">
-					<image class="portrait" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
-					<text class="user_name">Hi, 谛宝多多</text>
+					<view>
+						<image class="portrait" :src="portrait"></image>
+						<text class="user_name">{{user_name}}</text>
+					</view>
 					<text class="go_credit" @click="jumpGoPage()"><text>我的白条</text><i class="go_credit_icon"></i></text>
 				</view>
 				<view class="part_three">
@@ -51,9 +53,9 @@
 					</view>
 					<view class="part_three_bottom">
 						<view class="hot_goods"  v-for="(item, index) in credit_goods_list" :key="index">
-							<image :src="item.default_image"></image>
+							<image :src="item.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${item.goods_id}`)"></image>
 							<p>{{item.goods_name}}</p>
-							<text>9个月账期</text>
+							<!-- <text>9个月账期</text> -->
 						</view>
 					</view>
 				</view>
@@ -65,11 +67,11 @@
 					<view>
 						<view v-for="(item, index) in credit_cates_list" :key="index" class="cate_goods_view" v-show="index == current">
 							<view class="goods_info" v-for="(val, key ) in item.goods_list" :key="key">
-								<image :src="val.default_image"></image>
+								<image :src="val.default_image || $noGoodsImg" @click="jumpPhpPage(`app=goods&id=${val.goods_id}`)"></image>
 								<text class="goods_name">{{val.goods_name}}</text>
 								<view class="goods_tag">
 									<text>限时免息</text>
-									<text>9个月账期</text>
+									<!-- <text>9个月账期</text> -->
 								</view>
 								<text class="goods_des">{{val.goods_subname}}</text>
 								<view class="price_view">
@@ -81,6 +83,7 @@
 					</view>
 				</view>
 			</view>
+			<BottomBar />
 		</view>
 	</view>
 </template>
@@ -88,13 +91,14 @@
 <script>
 	import { php, go } from '../../common/host.js';
 	import uniIcons from "@/components/uni-icons/uni-icons.vue";
+	import BottomBar from "@/components/BottomBar/BottomBar.vue";
 	export default {
 		data() {
 			return {
 				tabIndex: 3, // 1:首页 2:精彩活动 3:谛宝白条 4:采购分期
 				credit_cates_list: [], // 分类
 				credit_goods_list: [],  // 商品
-				user_name: '',
+				user_name: 'Hi, 谛宝多多',
 				portrait: '',
 				current: 0,
 				keyword: '',
@@ -106,7 +110,8 @@
 			this.getData();
 		},
 		components: {
-			uniIcons
+			uniIcons,
+			BottomBar
 		},
 		methods: {
 			// changeTab(index) {
@@ -131,6 +136,8 @@
 					success: (res) => {
 						this.credit_cates_list = res.data.data.credit_cates_list;
 						this.credit_goods_list = res.data.data.credit_goods_list;
+						this.user_name = res.data.data.user_name;
+						this.portrait = res.data.data.portrait;
 					}
 				})
 			},
@@ -237,6 +244,7 @@
 	.main_content {
 		width: 93.6%;
 		margin: 0 auto;
+		padding-bottom: 98rpx;
 		.banner {
 			width: 100%;
 			height: 268rpx;
@@ -276,23 +284,34 @@
 		flex-wrap: wrap;
 		margin-top: 22rpx;
 		box-shadow:0px 4px 16px 0px rgba(0,0,0,0.03);
+		.class_item {
+			flex:0 0 25%;
+			margin-bottom: 32rpx;
 		}
-	.classbox image {
+		image {
 			display: block;
 			width: 100rpx;
 			height: 96rpx;
 			border-radius: 50%;
 		}
-	.classbox .class_name {
+		.class_name {
 			font-size: 22rpx;
 			line-height: 32rpx;
 		}
+	}
+	.classbox:after {
+		content: '';
+		flex: auto;
+	}
 	.part_two {
 		box-shadow:0px 4px 10px 0px rgba(0,0,0,0.05);
 		border-radius:16rpx;
 		padding: 26rpx;
 		background: #fff;
 		margin-top: 20rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 	}
 	.part_two .portrait {
 		width: 80rpx;
@@ -304,7 +323,7 @@
 		font-size: 32rpx;
 		font-weight: 600;
 		vertical-align: middle;
-		margin: 0 200rpx 0 16rpx;
+		margin: 0 0 0 16rpx;
 	}
 	.go_credit {
 		display: inline-block;
@@ -424,7 +443,7 @@
 				text-align: center;
 				background: #ECECEC;
 				display: inline-block;
-				width: 220rpx;
+				width: 200rpx;
 				margin-right: 20rpx;
 				position: relative;
 				text {
@@ -435,6 +454,8 @@
 			.tabs_item_first {
 				background: url(../../static/index/2891581574508_.pic.jpg) no-repeat;
 				background-size: 100% 100%;
+				font-size: 28rpx;
+				color: #6e6e6e;
 				text {
 					transform: skew(0deg) !important;
 				}
@@ -442,10 +463,13 @@
 			.tabs_item_first.act {
 				background: url(../../static/index/2811581501256_.pic.jpg) no-repeat;
 				background-size: 100% 100%;
+				color: #fff;
 			}
 			.tabs_item {
 				border-radius: 16rpx;
 				transform: skew(-30deg);
+				font-size: 28rpx;
+				color: #6e6e6e;
 			}
 			.tabs_item.act {
 				background: #D6C453;
@@ -453,6 +477,8 @@
 			.tabs_item_last {
 				background: url(../../static/index/2801581501256_.pic.jpg) no-repeat;
 				background-size: 100% 100%;
+				font-size: 28rpx;
+				color: #6e6e6e;
 				text {
 					transform: skew(0deg) !important;
 				}
@@ -460,6 +486,7 @@
 			.tabs_item_last.act {
 				background: url(../../static/index/2841581501334_.pic.jpg) no-repeat;
 				background-size: 100% 100%;
+				color: #fff;
 			}
 		}
 		.needs_tabs::-webkit-scrollbar {