dengjie commit : tabbar 初始样式

.eslintrc.js

@@ -29,16 +29,15 @@ module.exports = {
       }
     ],
     'vue/max-attributes-per-line': [
-			'error', 
+      2,
-			{
+      {
-        'singleline': {
+        singleline: 10,
-          'max': 1
+        multiline: {
-        },      
+          max: 1,
-        'multiline': {
+          allowFirstLine: true
-          'max': 1
         }
-      },
+      }
-		],
+    ],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/require-v-for-key': 'off',

App.vue

@@ -13,6 +13,7 @@
 </script>
 
 <style lang='scss'>
-	@import "uview-ui/index.scss";
 	/*每个页面公共css */
+	@import "@/static/styles/main.css";
+	@import "uview-ui/index.scss";
 </style>

main.js

@@ -1,5 +1,6 @@
 import App from './App'
-// 引入uView-ui组件库（注意这两行要放在 import Vue 之后）
+
+//引入uView-ui组件库（注意这两行要放在 import Vue 之后）
 import uView from 'uview-ui'
 Vue.use(uView)
 
@@ -8,7 +9,7 @@ import Vue from 'vue'
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({
-  ...App
+    ...App
 })
 app.$mount()
 // #endif

package-lock.json

@@ -1,22 +1,6 @@
 {
-  "name": "shitong-app",
-  "lockfileVersion": 2,
   "requires": true,
-  "packages": {
+  "lockfileVersion": 1,
-    "": {
-      "dependencies": {
-        "uview-ui": "^2.0.35"
-      }
-    },
-    "node_modules/uview-ui": {
-      "version": "2.0.35",
-      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.35.tgz",
-      "integrity": "sha512-OfMttN3XkHvQosXfd8bjz8ASTvypPoGzBWmQZBJ871bYMCA7t2bDFPlzjbxUj/5ykAjKnZ8zMUapSwSisVt99g==",
-      "engines": {
-        "HBuilderX": "^3.1.0"
-      }
-    }
-  },
   "dependencies": {
     "uview-ui": {
       "version": "2.0.35",

pages.json

@@ -4,9 +4,10 @@
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index",
+			"path": "pages/index/tabbar",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "食瞳",
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/index/index.vue

@@ -1,45 +1,6 @@
+<!-- 首页 -->
 <template>
-	<view class="wrap">
+	<view>
-		<u-swiper :list="list" keyName="image" showTitle :autoplay="false" circular />
+		首页
 	</view>
 </template>
-
-<script>
-	import {apiService} from '../../service/request.js'
-	export default {
-		computed: {},
-		data() {
-			return {
-				list: [{
-						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
-						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
-					},
-					{
-						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
-						title: '身无彩凤双飞翼，心有灵犀一点通'
-					},
-					{
-						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
-						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
-					}
-				],
-			}
-		},
-		onLoad() {
-			console.log('--------------')
-			apiService.getCategories().then(res => {
-				const {message} = res.data
-				console.log(message)
-			})
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style lang='scss' scoped>
-	.wrap {
-		padding: 40rpx;
-	}
-</style>

pages/index/industry.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>创意工厂</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			setStor() {
+				uni.setStorage({
+					key: 'id',
+					data: 100,
+					success() {
+						console.log('存储成功')
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

pages/index/my.vue

@@ -0,0 +1,6 @@
+<!-- 个人中心 -->
+<template>
+	<view class="components-theme">
+		我的
+	</view>
+</template>

pages/index/product.vue

@@ -0,0 +1,4 @@
+<!-- TabBar 文章资讯 -->
+<template>
+	<view>产品分类</view>
+</template>

pages/index/release.vue

@@ -0,0 +1,5 @@
+<template>
+	<view class="components-home">
+		需求发布
+	</view>
+</template>

pages/index/report.vue

@@ -0,0 +1,5 @@
+<template>
+	<view>
+		行业报告
+	</view>
+</template>

pages/index/tabbar.vue

@@ -0,0 +1,204 @@
+<template>
+	<view>
+		<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
+		<report v-if="PageCur=='report'"></report>
+		<release v-if="PageCur=='release'"></release>
+		<industry v-if="PageCur=='industry'"></industry>
+		<product v-if="PageCur=='product'"></product>
+		<my v-if="PageCur=='my'"></my>
+
+		<view class="box">
+			<view class="cu-bar tabbar bg-white shadow foot">
+				<view class="action" @click="NavChange" data-cur="index">
+					<view class='cuIcon-cu-image'>
+						<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
+						<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
+					</view>
+					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
+				</view>
+
+				<view class="action" @click="NavChange" data-cur="report">
+					<view class='cuIcon-cu-image'>
+						<!-- <view class="cu-tag badge"> -->
+						<!-- 红点 -->
+						<!-- </view> -->
+						<image v-if="PageCur=='report'" src="../../static/tabBar/shop_cur.png"></image>
+						<image v-if="PageCur != 'report'" src="../../static/tabBar/shop.png"></image>
+					</view>
+					<view :class="PageCur=='report'?'color_main':'text-gray'">行业报告</view>
+				</view>
+
+				<view class="action text-gray add-action">
+					<u-popup :show="show" mode="bottom" @close="close" safeAreaInsetBottom
+						overlay-class="header-overlay">
+						<view class="more_box">
+							<!-- 需求发布 -->
+							<view class="more_action" @close="close" @click="NavChange" data-cur="release">
+								<view class='more_image'>
+									<image src="../../static/tabBar/index.png"></image>
+								</view>
+								<view class="img_text">需求发布</view>
+							</view>
+							<!-- 创意工厂 -->
+							<view class="more_action" @close="close" @click="NavChange" data-cur="industry">
+								<view class='more_image'>
+									<image src="../../static/tabBar/index.png"></image>
+								</view>
+								<view class="img_text">创意工厂</view>
+							</view>
+						</view>
+						<view class="more_jian"></view>
+					</u-popup>
+					<image class="logo_btn" mode="widthFix" src="../../static/logo.png" @click="show = true"></image>
+				</view>
+
+				<view class="action" @click="NavChange" data-cur="product">
+					<view class='cuIcon-cu-image'>
+						<!-- <view class="cu-tag badge">{{message}}</view> -->
+						<image v-if="PageCur=='product'" src="../../static/tabBar/order_cur.png"></image>
+						<image v-if="PageCur != 'product'" src="../../static/tabBar/order.png"></image>
+					</view>
+					<view :class="PageCur=='product'?'color_main':'text-gray'">产品分类</view>
+				</view>
+
+				<view class="action" @click="NavChange" data-cur="my">
+					<view class='cuIcon-cu-image'>
+						<image v-if="PageCur=='my'" src="../../static/tabBar/me_cur.png"></image>
+						<image v-if="PageCur != 'my'" src="../../static/tabBar/me.png"></image>
+					</view>
+					<view :class="PageCur=='my'?'color_main':'text-gray'">我的</view>
+				</view>
+
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import index from "./index.vue"; //首页
+	import report from "./report.vue"; //行业报告
+	import release from "./release.vue"; //需求发布
+	import industry from "./industry.vue"; //需求发布
+	import product from "./product.vue"; //产品分类
+	import my from "./my.vue"; //我的
+	export default {
+		components: {
+			index,
+			report,
+			release,
+			industry,
+			product,
+			my
+		},
+		data() {
+			return {
+				PageCur: 'index',
+				// message: '0',
+				openId: '',
+				access_token: '',
+				tip: "我是提示",
+				duration: 1,
+				// 显示更多tabbar
+				show: false
+			};
+		},
+		methods: {
+			ShowNews(e) {
+				console.log(e)
+				this.PageCur = e;
+			},
+			close() {
+				this.show = false
+			},
+			NavChange: function(e) {
+				this.PageCur = e.currentTarget.dataset.cur;
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.color_main {
+		color: #000000;
+		font-weight: 900;
+	}
+
+	.box {
+		margin: 20upx 0;
+	}
+
+	.box view.cu-bar {
+		margin-top: 20upx;
+
+	}
+
+	.cu-bar {
+		z-index: 9999999999;
+	}
+
+	.logo_btn {
+		width: 38*2rpx;
+		height: 38*2rpx;
+		position: absolute;
+		z-index: 2;
+		border-radius: 50%;
+		top: -40rpx;
+		left: 0rpx;
+		right: 0;
+		margin: auto;
+		padding: 0;
+	}
+
+	.cu-bar.tabbar .action {
+		// margin-bottom: 50px;
+	}
+
+	.cu-bar.tabbar .action.add-action {
+		padding-top: 56rpx !important;
+	}
+
+	.more_box {
+		display: flex;
+		align-items: center;
+		min-height: 100upx;
+		justify-content: space-around;
+
+		.more_action {
+			.more_image {
+				image {
+					width: 50upx;
+					height: 50upx;
+					display: inline-block;
+				}
+			}
+
+			.img_text {}
+		}
+	}
+
+	.more_jian {
+		// width: 0px;
+		// height: 0px;
+		position: absolute;
+		bottom: -10px;
+		left: 45%;
+		width: 0;
+		height: 0;
+		border-top: 10px solid white;
+		border-right: 10px solid transparent;
+		border-left: 10px solid transparent;
+	}
+
+	/deep/ .u-popup__content {
+		background-color: #fff;
+		position: relative;
+		width: 180px;
+		height: 80px;
+		margin: 0 auto 86px auto;
+		border-radius: 10px;
+	}
+
+	/deep/.header-overlay {}
+</style>

static/styles/main.css

@@ -0,0 +1,464 @@
+/* ==================
+          操作条
+ ==================== */
+
+.cu-bar {
+	display: flex;
+	position: relative;
+	align-items: center;
+	min-height: 100upx;
+	justify-content: space-between;
+}
+
+.cu-bar .action {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	justify-content: center;
+	max-width: 100%;
+}
+
+
+.cu-bar .action.border-title {
+	position: relative;
+	top: -10upx;
+}
+
+.cu-bar .action.border-title text[class*="bg-"]:last-child {
+	position: absolute;
+	bottom: -0.5rem;
+	min-width: 2rem;
+	height: 6upx;
+	left: 0;
+}
+
+.cu-bar .action.sub-title {
+	position: relative;
+	top: -0.2rem;
+}
+
+.cu-bar .action.sub-title text {
+	position: relative;
+	z-index: 1;
+}
+
+.cu-bar .action.sub-title text[class*="bg-"]:last-child {
+	position: absolute;
+	display: inline-block;
+	bottom: -0.2rem;
+	border-radius: 6upx;
+	width: 100%;
+	height: 0.6rem;
+	left: 0.6rem;
+	opacity: 0.3;
+	z-index: 0;
+}
+
+.cu-bar .action.sub-title text[class*="text-"]:last-child {
+	position: absolute;
+	display: inline-block;
+	bottom: -0.7rem;
+	left: 0.5rem;
+	opacity: 0.2;
+	z-index: 0;
+	text-align: right;
+	font-weight: 900;
+	font-size: 36upx;
+}
+
+.cu-bar.justify-center .action.border-title text:last-child,
+.cu-bar.justify-center .action.sub-title text:last-child {
+	left: 0;
+	right: 0;
+	margin: auto;
+	text-align: center;
+}
+
+.cu-bar .action:first-child {
+	margin-left: 30upx;
+	font-size: 30upx;
+}
+
+
+
+.cu-bar .action text.text-cut {
+	text-align: left;
+	width: 100%;
+}
+
+.cu-bar .cu-avatar:first-child {
+	margin-left: 20upx;
+}
+
+.cu-bar .action:first-child>text[class*="cuIcon-"] {
+	margin-left: -0.3em;
+	margin-right: 0.3em;
+}
+
+.cu-bar .action:last-child {
+	margin-right: 30upx;
+}
+
+.cu-bar .action>text[class*="cuIcon-"],
+.cu-bar .action>view[class*="cuIcon-"] {
+	font-size: 36upx;
+}
+
+.cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
+	margin-left: 0.5em;
+}
+
+.cu-bar .content {
+	position: absolute;
+	text-align: center;
+	width: calc(100% - 340upx);
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	margin: auto;
+	height: 60upx;
+	font-size: 32upx;
+	line-height: 60upx;
+	cursor: none;
+	pointer-events: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.cu-bar.ios .content {
+	bottom: 7px;
+	height: 30px;
+	font-size: 32upx;
+	line-height: 30px;
+}
+
+.cu-bar.btn-group {
+	justify-content: space-around;
+}
+
+.cu-bar.btn-group button {
+	padding: 20upx 32upx;
+}
+
+.cu-bar.btn-group button {
+	flex: 1;
+	margin: 0 20upx;
+	max-width: 50%;
+}
+
+.cu-bar .search-form {
+	background-color: #f5f5f5;
+	line-height: 64upx;
+	height: 64upx;
+	font-size: 24upx;
+	color: #333333;
+	flex: 1;
+	display: flex;
+	align-items: center;
+	margin: 0 30upx;
+}
+
+.cu-bar .search-form+.action {
+	margin-right: 30upx;
+}
+
+.cu-bar .search-form input {
+	flex: 1;
+	padding-right: 30upx;
+	height: 64upx;
+	line-height: 64upx;
+	font-size: 26upx;
+	background-color: transparent;
+}
+
+.cu-bar .search-form [class*="cuIcon-"] {
+	margin: 0 0.5em 0 0.8em;
+}
+
+.cu-bar .search-form [class*="cuIcon-"]::before {
+	top: 0upx;
+}
+
+.cu-bar.fixed,
+.nav.fixed {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	z-index: 1024;
+	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
+}
+
+.cu-bar.foot {
+	position: fixed;
+	width: 100%;
+	bottom: 0;
+	z-index: 1024;
+	box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
+}
+
+.cu-bar.tabbar {
+	padding: 0;
+	height: calc(100upx + env(safe-area-inset-bottom) / 2);
+	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+}
+
+.cu-tabbar-height {
+	min-height: 100upx;
+	height: calc(100upx + env(safe-area-inset-bottom) / 2);
+}
+
+.cu-bar.tabbar.shadow {
+	box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
+}
+
+.cu-bar.tabbar .action {
+	font-size: 22upx;
+	position: relative;
+	flex: 1;
+	text-align: center;
+	padding: 0;
+	display: block;
+	height: auto;
+	line-height: 1;
+	margin: 0;
+	background-color: inherit;
+	overflow: initial;
+}
+
+.cu-bar.tabbar.shop .action {
+	width: 140upx;
+	flex: initial;
+}
+
+.cu-bar.tabbar .action.add-action {
+	position: relative;
+	z-index: 2;
+	padding-top: 50upx;
+}
+
+.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
+	position: absolute;
+	width: 70upx;
+	z-index: 2;
+	height: 70upx;
+	border-radius: 50%;
+	line-height: 70upx;
+	font-size: 50upx;
+	top: -35upx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	padding: 0;
+}
+
+.cu-bar.tabbar .action.add-action::after {
+	content: "";
+	position: absolute;
+	width: 100upx;
+	height: 100upx;
+	top: -50upx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
+	border-radius: 50upx;
+	background-color: inherit;
+	z-index: 0;
+}
+
+.cu-bar.tabbar .action.add-action::before {
+	content: "";
+	position: absolute;
+	width: 100upx;
+	height: 30upx;
+	bottom: 30upx;
+	left: 0;
+	right: 0;
+	margin: auto;
+	background-color: inherit;
+	z-index: 1;
+}
+
+.cu-bar.tabbar .btn-group {
+	flex: 1;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	padding: 0 10upx;
+}
+
+.cu-bar.tabbar button.action::after {
+	border: 0;
+}
+
+.cu-bar.tabbar .action [class*="cuIcon-"] {
+	width: 100upx;
+	position: relative;
+	display: block;
+	height: auto;
+	margin: 0 auto 10upx;
+	text-align: center;
+	font-size: 40upx;
+}
+
+.cu-bar.tabbar .action .cuIcon-cu-image {
+	margin: 0 auto;
+}
+
+
+.cu-bar.tabbar .action .cuIcon-cu-image image {
+	width: 50upx;
+	height: 50upx;
+	display: inline-block;
+}
+
+
+.cu-bar.tabbar .submit {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	text-align: center;
+	position: relative;
+	flex: 2;
+	align-self: stretch;
+}
+
+.cu-bar.tabbar .submit:last-child {
+	flex: 2.6;
+}
+
+.cu-bar.tabbar .submit+.submit {
+	flex: 2;
+}
+
+.cu-bar.tabbar.border .action::before {
+	content: " ";
+	width: 200%;
+	height: 200%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	border-right: 1upx solid rgba(0, 0, 0, 0.1);
+	z-index: 3;
+}
+
+.cu-bar.tabbar.border .action:last-child:before {
+	display: none;
+}
+
+.cu-bar.input {
+	padding-right: 20upx;
+	background-color: #ffffff;
+}
+
+.cu-bar.input input {
+	overflow: initial;
+	line-height: 64upx;
+	height: 64upx;
+	min-height: 64upx;
+	flex: 1;
+	font-size: 30upx;
+	margin: 0 20upx;
+}
+
+.cu-bar.input .action {
+	margin-left: 20upx;
+}
+
+.cu-bar.input .action [class*="cuIcon-"] {
+	font-size: 48upx;
+}
+
+.cu-bar.input input+.action {
+	margin-right: 20upx;
+	margin-left: 0upx;
+}
+
+.cu-bar.input .action:first-child [class*="cuIcon-"] {
+	margin-left: 0upx;
+}
+
+.cu-custom {
+	display: block;
+	position: relative;
+}
+
+.cu-custom .cu-bar .content {
+	width: calc(100% - 440upx);
+}
+
+/* #ifdef MP-ALIPAY */
+.cu-custom .cu-bar .action .cuIcon-back {
+	opacity: 0;
+}
+
+/* #endif */
+
+.cu-custom .cu-bar .content image {
+	height: 60upx;
+	width: 240upx;
+}
+
+.cu-custom .cu-bar {
+	min-height: 0px;
+	/* #ifdef MP-WEIXIN */
+	padding-right: 220upx;
+	/* #endif */
+	/* #ifdef MP-ALIPAY */
+	padding-right: 150upx;
+	/* #endif */
+	box-shadow: 0upx 0upx 0upx;
+	z-index: 9999;
+}
+
+.cu-custom .cu-bar .border-custom {
+	position: relative;
+	background: rgba(0, 0, 0, 0.15);
+	border-radius: 1000upx;
+	height: 30px;
+}
+
+.cu-custom .cu-bar .border-custom::after {
+	content: " ";
+	width: 200%;
+	height: 200%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border-radius: inherit;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	border: 1upx solid #ffffff;
+	opacity: 0.5;
+}
+
+.cu-custom .cu-bar .border-custom::before {
+	content: " ";
+	width: 1upx;
+	height: 110%;
+	position: absolute;
+	top: 22.5%;
+	left: 0;
+	right: 0;
+	margin: auto;
+	transform: scale(0.5);
+	transform-origin: 0 0;
+	pointer-events: none;
+	box-sizing: border-box;
+	opacity: 0.6;
+	background-color: #ffffff;
+}
+
+.cu-custom .cu-bar .border-custom text {
+	display: block;
+	flex: 1;
+	margin: auto !important;
+	text-align: center;
+	font-size: 34upx;
+}