edit

lib/GraceUI5/js/grace.js

@@ -1,5 +1,5 @@
 
-var md5                = require('@/GraceUI5/js/md5.js');
+var md5                = require('@/lib/GraceUI5/js/md5.js');
 module.exports = {
 	// 版本检查
 	verson : function(){

pages/index/index.vue

@@ -64,19 +64,19 @@
 				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
 				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
 			</view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">交流</text>
+			<view class="gui-footer-icon-buttons" @tap="navChang(3)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text" 
+				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
 			</view>
 			<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
-			<view class="gui-footer-icon-buttons"></view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(3)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
+			<view class="gui-footer-icon-buttons"></view>
+			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
+				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">消息</text>
 			</view>
 			<view class="gui-footer-icon-buttons" @tap="navChang(4)">
 				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 

pages/index/list.vue

@@ -2,100 +2,101 @@
 	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
 	:footerSets="{height:150, zIndex:100, bg:'none'}">
 		<!-- 页面主体 -->
-		<view slot="gBody" class="gui-margin">
-		<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
-		<view class="main" v-if="state == 1">
-			<view class="content" :style="height">
-				<scroll-view class="menus" :scroll-into-view="view" scroll-with-animation scroll-y>
-					<view class="wrapper">
-						<view class="menu" :id="`menu-${v.id}`" :class="{'current': k == cate_index}" v-for="(v, k) in fetch.cate" :key="k" @tap="menu(k, v.id)">
-							<text>{{ v.name }}</text>
+		<view slot="gBody">
+			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
+			<view class="gui-flex gui-rows gui-justify-content-center gui-margin-top">
+				<view style="width:500rpx;">
+					<gui-segmented-control :items="cates" :current="0" borderRadius="50rpx" @change="change"></gui-segmented-control>
+				</view>
+			</view>
+			
+			<block v-if="state == 1">
+				<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top gui-bg-gray demo-nav2">
+					<gui-switch-navigation :items="fetch.cate" @change="navchange"  activeDirection="center" textAlign="center" :margins="20" paddings="30rpx" activeLineHeight="4rpx" lineHeights="72rpx" activeLineWidth="100rpx" ></gui-switch-navigation>
+				</view>
+				<view class="gui-margin gui-card-list gui-flex gui-rows gui-wrap gui-space-between gui-margin-top">
+					<view class="gui-card-item" hover-class="gui-tap">
+						<view class="gui-card-img">
+							<gui-image :width="330" :height="191"
+							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
+							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
 						</view>
 					</view>
-				</scroll-view>
-				<!-- goods list begin -->
-				<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="top">
-					<view class="wrapper">
-						<swiper class="ads" id="ads" autoplay :interval="3000" indicator-dots v-if="fetch.focus.length > 0">
-							<swiper-item v-for="(v, k) in fetch.focus" :key="k" @tap="go" :data-url="v.link">
-								<image :src="v.pic"></image>
-							</swiper-item>
-						</swiper>
-						<view class="list">
-							<!-- category begin -->
-							<view class="category" v-for="(v, k) in fetch.cate" :key="k" :id="`cate-${v.id}`"  v-if="k == cate_index">
-								<view class="items">
-									<!-- 商品 begin -->
-									<view class="good" v-for="(v1, k1) in fetch.info[v.id]" :key="k1">
-										<image :src="v1.pic_cover" class="image" @tap="location(v1.id_code)"></image>
-										<view class="right" @tap="location(v1.id_code)">
-											<text class="name">{{ v1.name }}</text>
-											<text class="tips">{{ v1.desc }}</text>
-											<view class="price_and_action" v-if="v1.buy == 1" style="display: none;">
-												<text class="price">￥{{ v1.buy_price }}</text>
-											</view>
-										</view>
-									</view>
-									<!-- 商品 end -->
-								</view>
-							</view>
-							<!-- category end -->
+					
+					<view class="gui-card-item" hover-class="gui-tap">
+						<view class="gui-card-img">
+							<gui-image :width="330" :height="191"
+							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
+							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
 						</view>
 					</view>
-				</scroll-view>
-				<!-- goods list end -->
+					
+					<view class="gui-card-item" hover-class="gui-tap">
+						<view class="gui-card-img">
+							<gui-image :width="330" :height="191"
+							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
+							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
+						</view>
+					</view>
+					
+					<view class="gui-card-item" hover-class="gui-tap">
+						<view class="gui-card-img">
+							<gui-image :width="330" :height="191"
+							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
+							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
+						</view>
+					</view>
+				</view>
+			</block>
+			<view v-if="state == 2" class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
+				<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
+					<view>您还没有任何阅览的小记</view>
+					<view>小记可能就在你身边，快去寻找吧~</view>
+				</view>
+				<button type="primary" class="drink-btn" size="default" @tap="home">我的家园</button>
+				<view class="font-size-sm text-color-primary" @tap="qun" style="display: none;">加入官方微信群</view>
 			</view>
-			<!-- content end -->
-		</view>
-		<view v-if="state == 2" class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
-			<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
-				<view>您还没有任何阅览的小记</view>
-				<view>小记可能就在你身边，快去寻找吧~</view>
-			</view>
-			<button type="primary" class="drink-btn" size="default" @tap="home">我的家园</button>
-			<view class="font-size-sm text-color-primary" @tap="qun" style="display: none;">加入官方微信群</view>
+			
+			<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
 		</view>
 		
-		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
-	</view>
-	
-	<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
-	<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
-	style="height:150rpx;">
-		<view class="gui-footer-icon-buttons" @tap="navChang(0)">
-			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-			:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
-			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-			:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
-		</view>
-		<view class="gui-footer-icon-buttons" @tap="navChang(1)">
-			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-			:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
-			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-			:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">交流</text>
-		</view>
-		<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
-		<view class="gui-footer-icon-buttons"></view>
-		<view class="gui-footer-icon-buttons" @tap="navChang(3)">
-			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-			:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
-			<text class="gui-footer-icon-buttons-text gui-block-text" 
-			:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
-		</view>
-		<view class="gui-footer-icon-buttons" @tap="navChang(4)">
-			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-			:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
-			<text class="gui-footer-icon-buttons-text gui-block-text" 
-			:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
-		</view>
-		<!-- 使用定位方式实现凸出按钮 -->
-		<view class="gui-footer-buttons-ab" @tap="navChang(2)">
-			<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
-			:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
-			<text class="gui-footer-icon-buttons-text gui-block-text" 
-			:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
+		<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
+		<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
+		style="height:150rpx;">
+			<view class="gui-footer-icon-buttons" @tap="navChang(0)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
+				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
+			</view>
+			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
+				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">交流</text>
+			</view>
+			<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
+			<view class="gui-footer-icon-buttons"></view>
+			<view class="gui-footer-icon-buttons" @tap="navChang(3)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text" 
+				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
+			</view>
+			<view class="gui-footer-icon-buttons" @tap="navChang(4)">
+				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text" 
+				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
+			</view>
+			<!-- 使用定位方式实现凸出按钮 -->
+			<view class="gui-footer-buttons-ab" @tap="navChang(2)">
+				<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
+				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
+				<text class="gui-footer-icon-buttons-text gui-block-text" 
+				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
+			</view>
 		</view>
-	</view>
 	</gui-page>
 </template>
 
@@ -118,6 +119,7 @@ export default {
 			cate_index: 0,//默认分类
 			top: 0,
 			view: '',
+			cates : ["全部", "我的"],
 		}
 	},
 	components:{
@@ -185,6 +187,8 @@ export default {
 </script>
 
 <style>
+.demo-nav{width:750rpx; padding:20rpx 30rpx; box-sizing: border-box;}
+.demo-nav2{width:750rpx; padding:15rpx 30rpx;  box-sizing: border-box; padding-bottom:0;}
 .gui-text-small{font-size:20rpx;}
 .gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
 .gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}