diff --git a/.eslintrc.js b/.eslintrc.js index 2652a8c..ccd2301 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -29,16 +29,15 @@ module.exports = { } ], 'vue/max-attributes-per-line': [ - 'error', - { - 'singleline': { - 'max': 1 - }, - 'multiline': { - 'max': 1 + 2, + { + singleline: 10, + multiline: { + max: 1, + allowFirstLine: true } - }, - ], + } + ], 'vue/singleline-html-element-content-newline': 'off', 'vue/multiline-html-element-content-newline': 'off', 'vue/require-v-for-key': 'off', diff --git a/App.vue b/App.vue index 973e14f..7ae8456 100644 --- a/App.vue +++ b/App.vue @@ -13,6 +13,7 @@ diff --git a/main.js b/main.js index 0edb4e4..0118bf5 100644 --- a/main.js +++ b/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 @@ -21,4 +22,4 @@ export function createApp() { app } } -// #endif +// #endif \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index fd7e9d5..b23d8bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,22 +1,6 @@ { - "name": "shitong-app", - "lockfileVersion": 2, "requires": true, - "packages": { - "": { - "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" - } - } - }, + "lockfileVersion": 1, "dependencies": { "uview-ui": { "version": "2.0.35", diff --git a/pages.json b/pages.json index 35766a2..6d3d2cd 100644 --- a/pages.json +++ b/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" } } ], diff --git a/pages/index/index.vue b/pages/index/index.vue index 9f179b8..95fe12e 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,45 +1,6 @@ + - - - - diff --git a/pages/index/industry.vue b/pages/index/industry.vue new file mode 100644 index 0000000..aadd708 --- /dev/null +++ b/pages/index/industry.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/pages/index/my.vue b/pages/index/my.vue new file mode 100644 index 0000000..9b753b3 --- /dev/null +++ b/pages/index/my.vue @@ -0,0 +1,6 @@ + + diff --git a/pages/index/product.vue b/pages/index/product.vue new file mode 100644 index 0000000..c0338a9 --- /dev/null +++ b/pages/index/product.vue @@ -0,0 +1,4 @@ + + diff --git a/pages/index/release.vue b/pages/index/release.vue new file mode 100644 index 0000000..26981a4 --- /dev/null +++ b/pages/index/release.vue @@ -0,0 +1,5 @@ + diff --git a/pages/index/report.vue b/pages/index/report.vue new file mode 100644 index 0000000..6ce9d63 --- /dev/null +++ b/pages/index/report.vue @@ -0,0 +1,5 @@ + diff --git a/pages/index/tabbar.vue b/pages/index/tabbar.vue new file mode 100644 index 0000000..607d082 --- /dev/null +++ b/pages/index/tabbar.vue @@ -0,0 +1,204 @@ + + + + + diff --git a/static/styles/main.css b/static/styles/main.css new file mode 100644 index 0000000..f8d2935 --- /dev/null +++ b/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; +} diff --git a/static/tabBar/index.png b/static/tabBar/index.png new file mode 100644 index 0000000..2c2c140 Binary files /dev/null and b/static/tabBar/index.png differ diff --git a/static/tabBar/index_cur.png b/static/tabBar/index_cur.png new file mode 100644 index 0000000..83f6f07 Binary files /dev/null and b/static/tabBar/index_cur.png differ diff --git a/static/tabBar/me.png b/static/tabBar/me.png new file mode 100644 index 0000000..eb3d41e Binary files /dev/null and b/static/tabBar/me.png differ diff --git a/static/tabBar/me_cur.png b/static/tabBar/me_cur.png new file mode 100644 index 0000000..73c184c Binary files /dev/null and b/static/tabBar/me_cur.png differ diff --git a/static/tabBar/order.png b/static/tabBar/order.png new file mode 100644 index 0000000..0750fe8 Binary files /dev/null and b/static/tabBar/order.png differ diff --git a/static/tabBar/order_cur.png b/static/tabBar/order_cur.png new file mode 100644 index 0000000..51a57ad Binary files /dev/null and b/static/tabBar/order_cur.png differ diff --git a/static/tabBar/shop.png b/static/tabBar/shop.png new file mode 100644 index 0000000..08a0133 Binary files /dev/null and b/static/tabBar/shop.png differ diff --git a/static/tabBar/shop_cur.png b/static/tabBar/shop_cur.png new file mode 100644 index 0000000..e53a022 Binary files /dev/null and b/static/tabBar/shop_cur.png differ