├── .gitignore ├── static ├── home.png ├── user.png ├── shopping.png ├── home-selected.png ├── user-selected.png └── shopping-selected.png ├── app.wxss ├── app.json ├── style ├── font.sass ├── icons.sass ├── keyframes.sass ├── index.sass ├── var.sass ├── mixin.sass ├── base.sass ├── shopping.sass ├── color.sass ├── user.sass ├── house.sass ├── character.sass └── deal.sass ├── app.js ├── utils └── util.js ├── tasks ├── build.js └── webpack.conf.js ├── package.json ├── vendor.js ├── config.js └── pages ├── shopping └── shopping.mina ├── character └── character.mina ├── house └── house.mina ├── user └── user.mina ├── index └── index.mina └── deal └── deal.mina /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | mina 4 | node_modules 5 | yarn-error.log -------------------------------------------------------------------------------- /static/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/home.png -------------------------------------------------------------------------------- /static/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/user.png -------------------------------------------------------------------------------- /static/shopping.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/shopping.png -------------------------------------------------------------------------------- /static/home-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/home-selected.png -------------------------------------------------------------------------------- /static/user-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/user-selected.png -------------------------------------------------------------------------------- /static/shopping-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huanglong-zz/ice-mina/HEAD/static/shopping-selected.png -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/house/house", 5 | "pages/deal/deal", 6 | "pages/character/character", 7 | "pages/shopping/shopping", 8 | "pages/user/user" 9 | ], 10 | "window":{ 11 | "backgroundTextStyle":"light", 12 | "navigationBarBackgroundColor": "#fff", 13 | "navigationBarTitleText": "WeChat", 14 | "navigationBarTextStyle":"black" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /style/font.sass: -------------------------------------------------------------------------------- 1 | $fontCDN: 'http://oeyx5qln6.bkt.clouddn.com/' 2 | 3 | @font-face 4 | font-family: 'NotoSans-Regular' 5 | font-style: normal 6 | src: url("#{$fontCDN}google/NotoSans-Regular.ttf") 7 | 8 | @font-face 9 | font-family: 'NotoSans-Bold' 10 | font-style: normal 11 | src: url("#{$fontCDN}google/NotoSans-Bold.ttf") 12 | 13 | @font-face 14 | font-family: 'NotoMono-Regular' 15 | font-style: normal 16 | src: url("#{$fontCDN}google/NotoMono-Regular.ttf") -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | import './style/base.sass' 2 | import './vendor' 3 | 4 | // app.js 5 | App({ 6 | async getUserInfo () { 7 | if (this.globalData.userInfo) return this.globalData.userInfo 8 | 9 | const { code } = await wx.loginAsync() 10 | const { userInfo } = await wx.getUserInfoAsync() 11 | 12 | this.globalData.userInfo = userInfo 13 | }, 14 | 15 | globalData: { 16 | userInfo: null, 17 | qiniuCDN: 'http://osmai097y.bkt.clouddn.com', 18 | serverUrl: 'http://127.0.0.1:3000' 19 | } 20 | }) -------------------------------------------------------------------------------- /style/icons.sass: -------------------------------------------------------------------------------- 1 | $material-cdn: 'https://cdn.bootcss.com/material-design-icons/3.0.0/iconfont/MaterialIcons-Regular' 2 | 3 | @font-face 4 | font-family: 'Material Icons' 5 | font-style: normal 6 | src: url("#{$material-cdn}.eot") 7 | src: local('Material Icons'), local('MaterialIcons-Regular'), url("#{$material-cdn}.woff2") format("woff2"), url("#{$material-cdn}.woff") format("woff"), url("#{$material-cdn}.ttf") format("truetype") 8 | 9 | .material-icon 10 | font-family: 'Material Icons' 11 | font-size: $title2 12 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /style/keyframes.sass: -------------------------------------------------------------------------------- 1 | @keyframes showHouseBody 2 | 0% 3 | opacity: 0 4 | transform: translateY(20px) 5 | 50% 6 | opacity: 0 7 | transform: translateY(20px) 8 | 100% 9 | opacity: 1 10 | transform: translateY(0) 11 | 12 | @keyframes showHouse 13 | 0% 14 | opacity: 0 15 | 50% 16 | opacity: 0 17 | 100% 18 | opacity: 1 19 | 20 | @keyframes hideHouse 21 | 0% 22 | opacity: 0 23 | 50% 24 | opacity: 0 25 | 100% 26 | opacity: 0 27 | 28 | @keyframes flyFromBot 29 | from 30 | transform: translateY(100%) 31 | to 32 | transform: translateY(0) 33 | 34 | 35 | -------------------------------------------------------------------------------- /style/index.sass: -------------------------------------------------------------------------------- 1 | .index-carousel-content 2 | height: calc(100vw - 2 * #{$gutter} - #{$caption + $headline + $title} - 16rpx - 8rpx) 3 | 4 | .section 5 | width: calc(100vw - 2 * #{$gutter}) 6 | 7 | .section-title 8 | +title 9 | 10 | .map-bg 11 | position: absolute 12 | width: 100% 13 | z-index: 0 14 | opacity: .3 15 | margin-top: 200rpx 16 | 17 | .section-body 18 | position: relative 19 | display: flex 20 | flex-wrap: wrap 21 | justify-content: space-between 22 | margin-top: .8 * $gutter 23 | font-size: $body1 24 | line-height: 1.6 * $body1 25 | 26 | .p-title 27 | font-size: $body2 28 | line-height: 1.6 * $body2 29 | color: $grey-800 30 | margin-top: 1.3 * $body2 31 | .p 32 | +caption 33 | 34 | .section-item 35 | width: calc(50vw - #{$media-margin + $gutter}) 36 | margin-bottom: 1.6 * $card-gutter 37 | 38 | .cname 39 | +subheading(1.3) 40 | 41 | .name 42 | +supplement(1.3) 43 | .playedBy 44 | +supplement(1.3) 45 | 46 | .section-media 47 | width: 100% -------------------------------------------------------------------------------- /tasks/build.js: -------------------------------------------------------------------------------- 1 | require('shelljs/global') 2 | 3 | const { resolve } = require('path') 4 | const fs = require('fs') 5 | const webpack = require('webpack') 6 | const _ = require('lodash') 7 | const r = url => resolve(process.cwd(), url) 8 | const config = require('../config') 9 | const webpackConf = require('./webpack.conf') 10 | 11 | const assetsPath = config.assetsPath 12 | 13 | rm('-rf', assetsPath) 14 | mkdir(assetsPath) 15 | 16 | const renderConf = webpackConf 17 | const entry = () => _.reduce(config.json.pages, (en, i) => { 18 | en[i] = resolve(__dirname, '../', `${i}.mina`) 19 | 20 | return en 21 | }, {}) 22 | 23 | renderConf.output = { 24 | path: config.assetsPath, 25 | filename: '[name].js' 26 | } 27 | 28 | renderConf.entry = entry() 29 | renderConf.entry.app = config.app 30 | 31 | const compiler = webpack(renderConf) 32 | 33 | fs.writeFileSync(resolve(config.assetsPath, './app.json'), JSON.stringify(config.json), 'utf8') 34 | 35 | compiler.watch({}, (err, stats) => { 36 | if (err) process.stdout.write(err) 37 | 38 | console.log('[webpack:build]', stats.toString({ 39 | chunks: false, 40 | colors: true 41 | })) 42 | }) -------------------------------------------------------------------------------- /style/var.sass: -------------------------------------------------------------------------------- 1 | $card-gutter: 32rpx 2 | $gutter: 40rpx 3 | $carousel-margin: 20rpx 4 | $media-margin: 20rpx 5 | 6 | 7 | $radius-2db: 4rpx 8 | $shadow-1db: 0 1px 3px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12) 9 | 10 | $fastOutSlowIn: cubic-bezier(0.4, 0.0, 0.2, 1) 11 | $linearOutSlowIn: cubic-bezier(0.0, 0.0, 0.2, 1) 12 | $fastOutLinearIn: cubic-bezier(0.4, 0.0, 1, 1) 13 | 14 | $display1: 68rpx 15 | $headline: 48rpx 16 | 17 | $title: 42rpx 18 | $title2: 40rpx 19 | 20 | $subheading: 34rpx 21 | 22 | $content: 36rpx 23 | $content2: 32rpx 24 | 25 | $body1: 30rpx 26 | $body2: 28rpx 27 | 28 | $footer: 24rpx 29 | $supplement: 28rpx 30 | 31 | $button: 30rpx 32 | $caption: 26rpx 33 | 34 | $light: 300 35 | $regular: 400 36 | $semibold: 600 37 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ice-mina", 3 | "version": "1.0.0", 4 | "description": "wechat", 5 | "main": "app.js", 6 | "scripts": { 7 | "dev": "node ./tasks/build.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "wechat" 12 | ], 13 | "author": "Scott", 14 | "license": "MIT", 15 | "dependencies": { 16 | "lodash": "^4.17.4", 17 | "pug": "^2.0.0-rc.3", 18 | "ramda": "^0.24.1", 19 | "regenerator-runtime": "^0.10.5", 20 | "tween.js": "^16.6.0" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.1", 24 | "babel-core": "^6.25.0", 25 | "babel-loader": "^7.0.0", 26 | "babel-preset-env": "^1.5.2", 27 | "babel-preset-latest": "^6.24.1", 28 | "consolidate": "^0.14.5", 29 | "copy-webpack-plugin": "^4.0.1", 30 | "css-loader": "^0.28.4", 31 | "extract-text-webpack-plugin": "^2.1.2", 32 | "node-sass": "^4.5.3", 33 | "postcss": "^6.0.2", 34 | "postcss-loader": "^2.0.5", 35 | "progress-bar-webpack-plugin": "^1.9.3", 36 | "sass-loader": "^6.0.5", 37 | "shelljs": "^0.7.8", 38 | "style-loader": "^0.18.2", 39 | "vue-template-compiler": "^2.3.4", 40 | "webpack": "^3.0.0", 41 | "wechat-mina-loader": "0.0.7" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /vendor.js: -------------------------------------------------------------------------------- 1 | import regeneratorRuntime from 'regenerator-runtime' 2 | global.regeneratorRuntime = regeneratorRuntime 3 | 4 | import _ from 'lodash' 5 | global._ = _ 6 | 7 | import R from 'ramda' 8 | global.R = R 9 | 10 | const asyncWrap = fn => (options = {}) => new Promise((resolve, reject) => { 11 | let conf = { 12 | success: res => { 13 | resolve(res) 14 | }, 15 | fail: err => { 16 | reject(err) 17 | } 18 | } 19 | 20 | wx[fn](R.merge(conf, options)) 21 | }) 22 | 23 | wx.loginAsync = asyncWrap('login') 24 | wx.getUserInfoAsync = asyncWrap('getUserInfo') 25 | wx.reqAsync = asyncWrap('request') 26 | wx.getSystemInfoAsync = asyncWrap('getSystemInfo') 27 | wx.payAsync = asyncWrap('requestPayment') 28 | 29 | let lastTime = 0 30 | 31 | global.requestAnimationFrame = callback => { 32 | const currentTime = new Date().getTime() 33 | const timeToCall = Math.max(0, 16 - (currentTime - lastTime)) 34 | const timer = global.setTimeout(function () { 35 | callback(currentTime + timeToCall) 36 | }, timeToCall) 37 | 38 | lastTime = currentTime + timeToCall 39 | 40 | return timer 41 | } 42 | 43 | global.cancelAnimationFrame = timer => { 44 | clearTimeout(timer) 45 | } 46 | 47 | import TWEEN from 'tween.js' 48 | 49 | 50 | TWEEN.now = function () { 51 | return new Date().getTime() 52 | } 53 | 54 | 55 | global.TWEEN = TWEEN -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const r = url => resolve(__dirname, url) 3 | const assetsPath = resolve(process.cwd(), './mina') 4 | 5 | module.exports = { 6 | "json": { 7 | "pages":[ 8 | "pages/index/index", 9 | "pages/house/house", 10 | "pages/deal/deal", 11 | "pages/character/character", 12 | "pages/shopping/shopping", 13 | "pages/user/user" 14 | ], 15 | "tabBar": { 16 | "selectedColor": "#5aaca5", 17 | "color": "#565656", 18 | "list": [ 19 | { 20 | "iconPath": "static/home.png", 21 | "selectedIconPath": "static/home-selected.png", 22 | "pagePath": "pages/index/index", 23 | "text": "家族脸谱" 24 | }, 25 | { 26 | "iconPath": "static/shopping.png", 27 | "selectedIconPath": "static/shopping-selected.png", 28 | "pagePath": "pages/shopping/shopping", 29 | "text": "冰火周边" 30 | }, 31 | { 32 | "iconPath": "static/user.png", 33 | "selectedIconPath": "static/user-selected.png", 34 | "pagePath": "pages/user/user", 35 | "text": "我的账户" 36 | } 37 | ] 38 | } 39 | }, 40 | "window":{ 41 | "backgroundTextStyle":"light", 42 | "navigationBarBackgroundColor": "#fff", 43 | "navigationBarTitleText": "权利的游戏", 44 | "navigationBarTextStyle":"black" 45 | }, 46 | "assetsPath": assetsPath, 47 | "app": r('./app.js') 48 | } -------------------------------------------------------------------------------- /style/mixin.sass: -------------------------------------------------------------------------------- 1 | @mixin text-overflow 2 | width: 100% 3 | text-overflow: ellipsis 4 | white-space: nowrap 5 | overflow: hidden 6 | 7 | @mixin title-text 8 | font-size: $title 9 | color: $grey-800 10 | 11 | @mixin content-text 12 | font-size: $content 13 | line-height: 1.6 * $content 14 | color: $grey-600 15 | 16 | @mixin footer-text 17 | font-size: $footer 18 | color: $grey-400 19 | 20 | @mixin banner-image 21 | width: 280rpx 22 | 23 | @mixin caption 24 | font-size: $caption 25 | font-weight: $regular 26 | color: $grey-700 27 | 28 | @mixin headline 29 | font-size: $headline 30 | font-weight: $semibold 31 | color: $grey-900 32 | 33 | @mixin title 34 | font-size: $title 35 | font-weight: $semibold 36 | color: $grey-900 37 | line-height: 1.6 * $title 38 | 39 | @mixin subheading($line-height) 40 | font-size: $subheading 41 | font-weight: $regular 42 | color: $grey-800 43 | line-height: $line-height * $subheading 44 | 45 | @mixin supplement($line-height) 46 | font-size: $supplement 47 | font-weight: $regular 48 | color: $grey-700 49 | line-height: $line-height * $supplement 50 | 51 | @mixin clearfix 52 | &:after, 53 | &:before 54 | content: "" 55 | display: table 56 | line-height: 0 57 | 58 | &:after 59 | clear: both 60 | 61 | @mixin carousel-image 62 | width: calc(100vw - 2 * #{$gutter}) 63 | height: calc((100vw - 2 * #{$gutter}) * 3 / 2) 64 | border-radius: $radius-2db 65 | 66 | @mixin googleFont 67 | font-family: "NotoSans-Bold, NotoMono-Regular, NotoSans-Regular, 'Roboto'" -------------------------------------------------------------------------------- /pages/shopping/shopping.mina: -------------------------------------------------------------------------------- 1 | 18 | 56 | -------------------------------------------------------------------------------- /pages/character/character.mina: -------------------------------------------------------------------------------- 1 | 28 | 29 | -------------------------------------------------------------------------------- /style/base.sass: -------------------------------------------------------------------------------- 1 | @import "./var" 2 | @import "./color" 3 | @import "./font" 4 | @import "./icons" 5 | @import "./keyframes" 6 | @import "./mixin" 7 | @import "./house" 8 | @import "./character" 9 | @import "./shopping" 10 | @import "./deal" 11 | @import "./index" 12 | @import "./user" 13 | 14 | .container 15 | min-height: 100vh 16 | width: 100vw 17 | display: flex 18 | flex-direction: column 19 | justify-content: flex-start 20 | align-items: center 21 | overflow: scroll 22 | 23 | .fullscreen 24 | width: calc(100vw - 2 * #{$gutter}) 25 | height: 100vh 26 | position: fixed 27 | top: 0 28 | left: 0 29 | z-index: 101 30 | flex-direction: column 31 | display: none 32 | background-color: $white 33 | padding: 0 $gutter 2 * $gutter $gutter 34 | overflow: scroll 35 | 36 | .br 37 | margin-top: 1.6 * $gutter 38 | 39 | .gutter-top 40 | margin-top: $gutter 41 | 42 | .hr 43 | width: 100% 44 | max-width: calc(100vw - 2 * #{$gutter}) 45 | height: 2rpx 46 | background-color: $grey-400 47 | margin: $gutter 0 48 | 49 | .back 50 | width: 1.7rem 51 | height: 1.7rem 52 | position: fixed 53 | top: 0.5 * $gutter 54 | right: $gutter 55 | background-color: $grey-800 56 | color: $white 57 | display: flex 58 | justify-content: center 59 | align-items: center 60 | border-radius: 50% 61 | 62 | .material-icon 63 | font-size: 1.6rem 64 | 65 | .carousel-content 66 | width: calc(100vw - 2 * #{$gutter}) 67 | display: flex 68 | padding: 0 $gutter 69 | 70 | .carousel 71 | margin-left: $carousel-margin 72 | &:first-child 73 | margin-left: 0 74 | 75 | .carousel-header 76 | .caption 77 | +caption 78 | height: $caption 79 | 80 | .headline 81 | +headline 82 | height: $headline 83 | margin-top: 8rpx 84 | 85 | .title 86 | +title 87 | height: $title 88 | color: $grey-700 89 | margin-bottom: 16rpx 90 | 91 | .carousel-media 92 | +carousel-image 93 | 94 | 95 | -------------------------------------------------------------------------------- /pages/house/house.mina: -------------------------------------------------------------------------------- 1 | 29 | 30 | -------------------------------------------------------------------------------- /style/shopping.sass: -------------------------------------------------------------------------------- 1 | .shopping 2 | .shopping-title 3 | width: 100vw 4 | height: 112rpx 5 | display: flex 6 | justify-content: center 7 | align-items: center 8 | font-size: $content 9 | color: $grey-900 10 | border-top: 1px solid$grey-400 11 | border-bottom: $gutter solid$grey-200 12 | 13 | .shopping-list 14 | 15 | .shopping-item 16 | width: 100vw 17 | height: 40vw 18 | overflow: hidden 19 | display: flex 20 | 21 | .shopping-media 22 | width: 40vw 23 | height: 40vw 24 | 25 | image 26 | width: 40vw 27 | height: 40vw 28 | 29 | .shopping-body 30 | flex: 1 31 | border-bottom: 1px solid$grey-200 32 | padding: .8 * $gutter 33 | display: flex 34 | flex-direction: column 35 | 36 | .shopping-body-title 37 | height: $content + 10rpx 38 | color: $grey-800 39 | font-size: $content 40 | margin-bottom: .4 * $gutter 41 | +text-overflow 42 | width: calc(60vw - 1.6 * #{$gutter}) 43 | 44 | .shopping-body-content 45 | max-height: 4.8 * $content 46 | color: $grey-600 47 | font-size: $supplement 48 | line-height: 1.2 * $content 49 | flex: 1 50 | 51 | text 52 | width: 100% 53 | overflow : hidden 54 | text-overflow: ellipsis 55 | display: -webkit-box 56 | -webkit-line-clamp: 4 57 | -webkit-box-orient: vertical 58 | 59 | .shopping-body-footer 60 | height: 50rpx 61 | padding-right: $gutter 62 | color: $blue 63 | font-size: $caption 64 | position: relative 65 | 66 | .text 67 | display: inline 68 | position: absolute 69 | right: 0 70 | top: calc(50% - #{$caption} / 2) 71 | 72 | .icon 73 | font-family: 'Material Icons' 74 | font-size: 1.6 * $caption 75 | display: inline 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /style/color.sass: -------------------------------------------------------------------------------- 1 | $red: #F44336 2 | 3 | $pink: #E91E63 4 | 5 | $purple: #9C27B0 6 | 7 | $blue: #2196F3 8 | 9 | $cyan: #00BCD4 10 | 11 | $teal: #009688 12 | $teal-50: #E0F2F1 13 | $teal-100: #B2DFDB 14 | $teal-200: #80CBC4 15 | $teal-300: #4DB6AC 16 | $teal-400: #26A69A 17 | $teal-500: #009688 18 | $teal-600: #00897B 19 | $teal-700: #00796B 20 | $teal-800: #00695C 21 | $teal-900: #004D40 22 | $teal-A100: #A7FFEB 23 | $teal-A200: #64FFDA 24 | $teal-A400: #1DE9B6 25 | $teal-A700: #00BFA5 26 | 27 | $green: #4CAF50 28 | 29 | $yellow: #FFEB3B 30 | 31 | $orange: #FF9800 32 | 33 | $amber: #FFC107 34 | 35 | $deep-orange: #FF5722 36 | 37 | $grey: #9E9E9E 38 | $grey-50: #FAFAFA 39 | $grey-100: #F5F5F5 40 | $grey-200: #EEEEEE 41 | $grey-300: #E0E0E0 42 | $grey-400: #BDBDBD 43 | $grey-500: #9E9E9E 44 | $grey-600: #757575 45 | $grey-700: #616161 46 | $grey-800: #424242 47 | $grey-900: #212121 48 | 49 | $blue-grey: #607D8B 50 | $blue-grey-50: #ECEFF1 51 | $blue-grey-100: #CFD8DC 52 | $blue-grey-200: #B0BEC5 53 | $blue-grey-300: #90A4AE 54 | $blue-grey-400: #78909C 55 | $blue-grey-500: #607D8B 56 | $blue-grey-600: #546E7A 57 | $blue-grey-700: #455A64 58 | $blue-grey-800: #37474F 59 | $blue-grey-900: #263238 60 | 61 | $black: #000 62 | $white: #fff 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /style/user.sass: -------------------------------------------------------------------------------- 1 | $user-gutter: 90rpx 2 | 3 | .user 4 | width: calc(100vw - 2 * #{$user-gutter}) 5 | padding: $user-gutter 6 | 7 | .user-info 8 | width: 100% 9 | height: 112rpx 10 | display: flex 11 | justify-content: space-between 12 | 13 | .name 14 | font-size: 46rpx 15 | 16 | .profile 17 | width: 112rpx 18 | height: 112rpx 19 | overflow: hidden 20 | border-radius: 50% 21 | border: 1rpx solid$grey-100 22 | 23 | .user-table 24 | margin-top: 1.6 * $gutter 25 | 26 | .table-line 27 | padding: 14rpx 0 28 | border-top: 1px solid$grey-400 29 | 30 | .table-label 31 | width: 100% 32 | height: 1.6 * $content2 33 | font-size: $content2 34 | display: flex 35 | justify-content: space-between 36 | align-items: center 37 | color: $grey-800 38 | 39 | .table-body 40 | width: 100% 41 | font-size: $title2 42 | line-height: 1.2 * $title2 43 | position: relative 44 | 45 | .table-save-btn 46 | position: absolute 47 | top: .1 * $title2 48 | right: 0 49 | 50 | .material-icon 51 | font-size: $footer 52 | 53 | .payment 54 | display: flex 55 | 56 | image 57 | width: 160rpx 58 | height: 160rpx 59 | 60 | .payment-body 61 | height: 160rpx 62 | border-bottom: 1px solid$grey-200 63 | flex: 1 64 | 65 | .payment-title 66 | height: 1.8 * $footer 67 | line-height: 1.8 * $footer 68 | color: $grey-700 69 | font-size: $footer 70 | 71 | .payment-intro 72 | height: 1.8 * 20rpx 73 | line-height: 1.8 * 20rpx 74 | color: $grey 75 | font-size: 20rpx 76 | 77 | .payment-footer 78 | width: 100rpx 79 | height: 160rpx 80 | border-bottom: 1px solid$grey-200 81 | 82 | .payment-price 83 | width: 100% 84 | height: 32rpx 85 | display: flex 86 | align-items: center 87 | justify-content: center 88 | font-size: 20rpx 89 | color: $white 90 | background-color: $teal-800 91 | 92 | -------------------------------------------------------------------------------- /pages/user/user.mina: -------------------------------------------------------------------------------- 1 | 41 | 76 | -------------------------------------------------------------------------------- /tasks/webpack.conf.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | const r = url => resolve(__dirname, url) 3 | const webpack = require('webpack') 4 | const CopyWebpackPlugin = require('copy-webpack-plugin') 5 | const ProgressBarPlugin = require('progress-bar-webpack-plugin') 6 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 7 | const extractSass = new ExtractTextPlugin({ 8 | filename: '[name].wxss' 9 | }) 10 | 11 | const config = require('../config') 12 | 13 | module.exports = { 14 | devtool: false, 15 | output: { 16 | path: config.assetsPath, 17 | filename: '[name].js' 18 | }, 19 | resolve: { 20 | alias: { 21 | utils: r('../utils/utils') 22 | } 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.js$/, 28 | loader: 'babel-loader', 29 | exclude: /node_modules/, 30 | options: { 31 | presets: [ 32 | 'latest' 33 | ] 34 | } 35 | }, 36 | { 37 | test: /\.sass$/, 38 | use: extractSass.extract({ 39 | use: [ 40 | { 41 | loader: 'css-loader' 42 | }, 43 | { 44 | loader: 'postcss-loader', 45 | options: { 46 | plugins: (loader) => [ 47 | require('autoprefixer')({ 48 | browsers: [ 49 | 'last 2 versions' 50 | ] 51 | }) 52 | ] 53 | } 54 | }, 55 | { 56 | loader: 'sass-loader', 57 | options: { 58 | indentedSyntax: true 59 | } 60 | } 61 | ], 62 | fallback: 'style-loader' 63 | }) 64 | }, 65 | { 66 | test: /\.mina$/, 67 | loader: 'wechat-mina-loader', 68 | options: { 69 | dist: './mina' 70 | } 71 | } 72 | ] 73 | }, 74 | plugins: [ 75 | extractSass, 76 | new CopyWebpackPlugin([ 77 | { 78 | from : { 79 | glob: 'pages/**/*.json', 80 | to: '' 81 | } 82 | }, { 83 | from: 'static', 84 | to: 'static' 85 | } 86 | ]), 87 | new webpack.optimize.ModuleConcatenationPlugin(), 88 | new webpack.optimize.UglifyJsPlugin({ 89 | souceMap: false 90 | }), 91 | new ProgressBarPlugin() 92 | ] 93 | } 94 | -------------------------------------------------------------------------------- /style/house.sass: -------------------------------------------------------------------------------- 1 | .house 2 | width: 100vw 3 | height: 100vh 4 | 5 | .house-media 6 | width: 100vw 7 | overflow: hidden 8 | position: relative 9 | 10 | .house-text 11 | position: absolute 12 | color: $white 13 | bottom: $gutter 14 | left: 48rpx 15 | width: calc(100vw - 96rpx) 16 | 17 | .words 18 | font-size: $footer 19 | 20 | .name 21 | margin-top: 10rpx 22 | font-size: $title 23 | 24 | 25 | image 26 | width: 100% 27 | 28 | .house-body 29 | margin-top: 1.5 * $gutter 30 | 31 | .house-item 32 | width: calc(100vw - 2.6 * #{$gutter}) 33 | padding: 0 1.3 * $gutter 34 | 35 | .house-item-title 36 | margin-bottom: 2 * $gutter 37 | position: relative 38 | +title-text 39 | 40 | &:after 41 | content: '' 42 | width: 100% 43 | height: 2rpx 44 | position: absolute 45 | top: calc(100% + .6 * #{$gutter}) 46 | left: 0 47 | background-color: $grey-400 48 | 49 | .house-item-body 50 | +content-text 51 | 52 | .list 53 | +content-text 54 | 55 | .history 56 | .history-title 57 | font-size: $title2 58 | color: $grey-700 59 | margin-bottom: .6 * $gutter 60 | 61 | .history-body 62 | font-size: $content2 63 | color: $grey-600 64 | line-height: 1.6 * $content2 65 | margin-bottom: $gutter 66 | 67 | 68 | 69 | .swornMember 70 | width: 100% 71 | margin-top: 1.6 * $gutter 72 | display: flex 73 | 74 | &:first-child 75 | margin-top: 0 76 | 77 | 78 | image 79 | width: 236rpx 80 | 81 | .swornMember-body 82 | flex: 1 83 | height: 291rpx 84 | display: flex 85 | flex-direction: column 86 | justify-content: flex-start 87 | align-items: flex-start 88 | padding-left: .8 * $gutter 89 | 90 | .name 91 | font-size: $title2 92 | color: $grey-700 93 | 94 | 95 | .introduction 96 | margin-top: .4 * $gutter 97 | font-size: $footer 98 | color: $grey-600 99 | line-height: 1.6 * $footer 100 | 101 | 102 | .house-intro 103 | width: calc(100vw - 2 * #{$gutter}) 104 | 105 | .p 106 | font-size: $content 107 | line-height: 1.6 * $content 108 | color: $grey-700 109 | margin-bottom: $content 110 | 111 | &:last-child 112 | margin-bottom: 0 113 | 114 | .p2 115 | font-size: $content2 116 | line-height: 1.6 * $content2 117 | color: $grey-700 118 | margin-bottom: $content2 -------------------------------------------------------------------------------- /style/character.sass: -------------------------------------------------------------------------------- 1 | .character-carousel-content 2 | margin-top: 1.6 * $gutter 3 | height: calc((100vw - 2 * #{$gutter}) / 3 * 2) 4 | 5 | .character 6 | width: 100vw 7 | height: 100vh 8 | 9 | .character-header 10 | width: 100vw 11 | height: 61vw 12 | display: flex 13 | margin-bottom: calc(25vw + 1.6 * #{$gutter}) 14 | 15 | .character-header-bg 16 | width: 100% 17 | height: 460rpx !important 18 | position: absolute 19 | z-index: 0 20 | top: 0 21 | left: 0 22 | filter: brightness(80%) opacity(50%) grayscale(70%) 23 | 24 | 25 | .character-media 26 | width: 280rpx 27 | margin-left: $gutter 28 | position: relative 29 | z-index: 1 30 | 31 | image 32 | width: 100% 33 | position: absolute 34 | right: 0 35 | bottom: 0 36 | transform: translateY(25vw) 37 | overflow: visible 38 | 39 | .character-header-footer 40 | width: calc(100vw - 2.8 * #{$gutter} - 280rpx) 41 | height: 25vw 42 | left: calc(100% + .8 * #{$gutter}) 43 | position: absolute 44 | bottom: 0 45 | display: flex 46 | align-items: flex-end 47 | 48 | .allegiances 49 | flex: 1 50 | font-size: $content2 51 | color: $grey-700 52 | line-height: 1.6 * $content2 53 | 54 | .born 55 | width: 170rpx 56 | height: 40rpx 57 | background-color: $grey-400 58 | color: $white 59 | display: flex 60 | justify-content: center 61 | align-items: center 62 | font-size: $footer 63 | 64 | 65 | .character-text 66 | flex: 1 67 | position: relative 68 | z-index: 2 69 | display: flex 70 | flex-direction: column 71 | justify-content: flex-end 72 | padding-left: .8 * $gutter 73 | 74 | .cname 75 | // +googleFont 76 | font-weight: 900 77 | font-size: 44rpx 78 | color: $white 79 | margin-bottom: .4 * $gutter 80 | 81 | .name 82 | font-size: $content 83 | color: $white 84 | margin-bottom: 1.6 * $gutter 85 | 86 | .character-body 87 | .character-item 88 | width: calc(100vw - 2 * #{$gutter}) 89 | padding: 0 $gutter 90 | 91 | .character-item-title 92 | margin-bottom: 2 * $gutter 93 | position: relative 94 | +title-text 95 | 96 | &:after 97 | content: '' 98 | width: 100% 99 | height: 2rpx 100 | position: absolute 101 | top: calc(100% + .6 * #{$gutter}) 102 | left: 0 103 | background-color: $grey-400 104 | 105 | .character-item-body 106 | +content-text 107 | 108 | 109 | .character-intro 110 | width: calc(100vw - 2 * #{$gutter}) 111 | padding: 0 $gutter 112 | 113 | .p 114 | font-size: $content 115 | line-height: 1.6 * $content 116 | color: $grey-700 117 | margin-bottom: $content 118 | 119 | &:last-child 120 | margin-bottom: 0 121 | 122 | .p2 123 | font-size: $content2 124 | line-height: 1.6 * $content2 125 | color: $grey-700 126 | margin-bottom: $content2 -------------------------------------------------------------------------------- /pages/index/index.mina: -------------------------------------------------------------------------------- 1 | 59 | 105 | -------------------------------------------------------------------------------- /style/deal.sass: -------------------------------------------------------------------------------- 1 | .deal 2 | width: 100vw 3 | height: 100vh 4 | position: relative 5 | overflow: hidden 6 | 7 | .deal-content 8 | width: 100vw 9 | height: calc(100vh - 112rpx) 10 | 11 | .deal-carousel 12 | width: 100vw 13 | height: 100vw / 3 * 2 14 | 15 | swiper 16 | width: 100vw 17 | height: 100vw / 3 * 2 18 | 19 | .deal-carousel-media 20 | width: 100vw 21 | height: 100vw / 3 * 2 22 | 23 | .deal-carousel-item 24 | position: absolu 25 | top: 0 26 | 27 | .deal-body 28 | padding: .6 * $gutter $gutter 29 | 30 | .deal-price 31 | 32 | .price 33 | font-size: $headline 34 | position: relative 35 | margin-left: $supplement - 10rpx 36 | color: $teal-800 37 | display: inline 38 | 39 | &:before 40 | content: '¥' 41 | width: $supplement 42 | position: absolute 43 | top: 0 44 | left: -$supplement 45 | font-size: $supplement 46 | text-align: right 47 | 48 | &:after 49 | content: attr(data-price) 50 | width: $content2 51 | position: absolute 52 | font-size: $content2 53 | bottom: 0 54 | right: -$content2 55 | text-align: left 56 | .deal-title 57 | +title 58 | 59 | .deal-intro 60 | margin-top: .8 * $gutter 61 | +subheading(1.6) 62 | 63 | .pay-content 64 | width: 100vw 65 | background-color: $grey-100 66 | position: absolute 67 | bottom: 0 68 | left: 0 69 | border-top: 2rpx solid$grey-300 70 | display: flex 71 | flex-direction: column 72 | justify-content: center 73 | align-items: center 74 | z-index: 3 75 | transform: translate(0, 100%) 76 | transition: all 200ms $fastOutSlowIn 77 | 78 | .pay-header 79 | width: 100vw 80 | height: 2.6 * $body1 81 | display: flex 82 | justify-content: space-between 83 | align-items: center 84 | border-bottom: 1px solid$grey-300 85 | font-size: $body1 86 | color: $grey-700 87 | 88 | .close 89 | font-weight: 300 90 | color: $blue 91 | margin-right: $gutter 92 | 93 | .pay-body 94 | width: calc(100vw - 4 * #{$gutter}) 95 | padding: 0 2 * $gutter 96 | 97 | .pay-item 98 | display: flex 99 | border-bottom: 1px solid$grey-300 100 | padding: 20rpx 0 101 | 102 | image 103 | width: 100rpx 104 | height: 100rpx 105 | border-radius: 8rpx 106 | margin-right: $gutter 107 | 108 | .pay-item-body 109 | flex: 1 110 | 111 | .pay-item-name 112 | color: $grey-800 113 | font-size: $supplement 114 | 115 | .pay-item-price 116 | color: $grey-400 117 | font-size: $supplement 118 | margin-top: 10rpx 119 | 120 | 121 | .input-group 122 | padding: 20rpx 0 123 | border-bottom: 1px solid$grey-300 124 | display: flex 125 | align-items: center 126 | 127 | .label 128 | width: 100rpx 129 | text-align: right 130 | color: $grey-400 131 | font-size: $supplement 132 | height: $supplement 133 | margin: .4 * $supplement 20rpx .4 * $supplement 0 134 | 135 | input 136 | flex: 1 137 | color: $grey-900 138 | font-size: $supplement 139 | height: $supplement 140 | margin: .4 * $supplement 0 141 | 142 | .pay-action 143 | font-size: $title 144 | color: $teal 145 | height: 3 * $title 146 | display: flex 147 | justify-content: center 148 | align-items: center 149 | 150 | .buy 151 | width: 100vw 152 | height: 112rpx 153 | position: absolute 154 | bottom: 0 155 | left: 0 156 | border-top: 2rpx solid$grey-300 157 | display: flex 158 | justify-content: center 159 | align-items: center 160 | z-index: 2 161 | 162 | .btn 163 | width: 320rpx 164 | height: 72rpx 165 | background-color: $teal 166 | border-radius: $radius-2db 167 | color: $white 168 | font-size: $button 169 | display: flex 170 | justify-content: center 171 | align-items: center 172 | 173 | 174 | .deal-table 175 | width: calc(100vw - 2 * #{$gutter} - 96rpx) 176 | margin-top: $gutter 177 | padding: 26rpx 48rpx 178 | background-color: $teal-100 179 | border-radius: $radius-2db 180 | 181 | .table-line 182 | width: 100% 183 | height: $content2 + 56rpx 184 | color: $grey-700 185 | display: flex 186 | font-size: $content2 187 | align-items: center 188 | justify-content: center 189 | border-top: 2rpx solid$grey-100 190 | 191 | &:first-child 192 | border-top: none 193 | 194 | .key 195 | flex: 1 196 | 197 | .val 198 | flex: 1 199 | 200 | .deal-ps 201 | font-size: $headline 202 | color: $grey-800 203 | margin-top: $gutter 204 | 205 | .ps-line 206 | color: $grey-700 207 | font-size: $content2 208 | height: 1.6 * $content2 209 | 210 | &:first-child 211 | margin-top: .6 * $content2 212 | 213 | 214 | 215 | 216 | -------------------------------------------------------------------------------- /pages/deal/deal.mina: -------------------------------------------------------------------------------- 1 | 48 | 188 | --------------------------------------------------------------------------------