122 |
123 | {name}
124 |
125 |
126 | <DiscountInfo supports={supports} classMap={classMap}/>
127 | <Title info={sellerBulletin}/>
128 | <span className="bulletin-content">{bulletin}</span>
129 | </div>
130 | </div>
131 | <div className="detail-close" onClick={this.handleHiddenClick}>
132 | <i className="icon-close"></i>
133 | </div>
134 | </div>
135 | }
136 | </ReactCSSTransitionGroup>
137 | </header>
138 | );
139 | }
140 | }
--------------------------------------------------------------------------------
/src/components/header/header.less:
--------------------------------------------------------------------------------
1 | @import '../../common/less/mixin.less';
2 |
3 | header {
4 | position: relative;
5 | height: 2.78rem;
6 | background-size: 100% 100%;
7 | background-color: rgba(7, 17, 27, .5);
8 | color: #fff;
9 | overflow: hidden;
10 |
11 | .content-wrap {
12 | position: relative;
13 | padding: .48rem .24rem .36rem .48rem;
14 |
15 | .avatar{
16 | position: relative;
17 | width: 1.28rem;
18 | height: 1.28rem;
19 | display: inline-block;
20 |
21 | img{
22 | width: 100%;
23 | border-radius: 5px;
24 | }
25 | }
26 |
27 | .content{
28 | position: relative;
29 | margin-left: .32rem;
30 | display: inline-block;
31 | vertical-align: top;
32 |
33 | .title{
34 | margin: .04rem 0 .16rem 0;
35 | height: .36rem;
36 |
37 | .brand{
38 | #bg-image('brand');
39 | width: .6rem;
40 | height: .36rem;
41 | display: inline-block;
42 | background-size: 100% 100%;
43 | vertical-align: top;
44 | }
45 |
46 | .name {
47 | margin-left: .12rem;
48 | font-size: 16px;
49 | color: rgb(255, 255, 255);
50 | font-weight: bold;
51 | line-height: 18px;
52 | display: inline-block;
53 | vertical-align: top;
54 | }
55 | }
56 |
57 | .description {
58 | display: block;
59 | margin-top: .16rem;
60 | font-size: 12px;
61 | color: rgb(255, 255, 255);
62 | font-weight: 200;
63 | line-height: 12px;
64 | margin-bottom: .2rem;
65 | }
66 |
67 | .support{
68 | margin-bottom: .04rem;
69 | height: .24rem;
70 | .type{
71 | display: inline-block;
72 | vertical-align: top;
73 | width: .24rem;
74 | height: .24rem;
75 | }
76 |
77 | .description {
78 | display: inline-block;
79 | font-size: 10px;
80 | vertical-align: top;
81 | margin: 0;
82 | margin-left: .08rem;
83 | }
84 | }
85 | }
86 |
87 | .support-count{
88 | position: absolute;
89 | height: .48rem;
90 | background-color: rgba(0, 0, 0, 0.2);
91 | right: .24rem;
92 | bottom: .28rem;
93 | padding: 0 .16rem;
94 | line-height: .48rem;
95 | border-radius: .28rem;
96 | text-align: center;
97 |
98 | .number{
99 | vertical-align: top;
100 | font-size: 10px;
101 | }
102 |
103 | .icon-keyboard_arrow_right{
104 | margin-left: .04rem;
105 | line-height: .48rem;
106 | font-size: 10px;
107 | }
108 | }
109 | }
110 |
111 | .bulletin-wrapper{
112 | height: .56rem;
113 | background-color: rgba(7, 17, 27, 0.2);
114 | padding: 0 .44rem 0 .24rem;
115 | line-height: .56rem;
116 | position: relative;
117 | overflow: hidden;
118 | text-overflow: ellipsis;
119 | white-space: nowrap;
120 |
121 | .bulletin{
122 | display: inline-block;
123 | vertical-align: top;
124 | width: .44rem;
125 | height: .24rem;
126 | #bg-image('bulletin');
127 | margin-top: .16rem;
128 | background-size: 100% 100%;
129 | }
130 |
131 | .bulletin-content{
132 | font-size: 10px;
133 | line-height: .56rem;
134 | margin: 0 .08rem;
135 | }
136 |
137 | .icon-keyboard_arrow_right{
138 | position: absolute;
139 | right: .24rem;
140 | top: .08rem;
141 | line-height: .56rem;
142 | font-size: 10px;
143 | }
144 | }
145 |
146 | .background {
147 | position: absolute;
148 | top: 0;
149 | left: 0;
150 | width: 100%;
151 | height: 100%;
152 | z-index: -1;
153 | filter: blur(10px);
154 |
155 | img {
156 | width: 100%;
157 | height: 100%;
158 | }
159 | }
160 |
161 | .detail{
162 | position: fixed;
163 | top: 0;
164 | left: 0;
165 | width: 100%;
166 | height: 100%;
167 | overflow: hidden;
168 | background-color: rgba(7, 17, 27, 0.8);
169 | text-align: center;
170 | z-index: 100;
171 |
172 | .detail-wrapper{
173 | height: 100%;
174 | min-height: 100%;
175 |
176 | .detail-main{
177 | margin-top: 1.28rem;
178 | padding-bottom: 1.28rem;
179 | .title{
180 | display: block;
181 | font-size: 16px;
182 | font-weight: 700;
183 | line-height: 16px;
184 | margin: 0 auto;
185 | }
186 |
187 | .stars{
188 | height: .48rem;
189 | margin-top: .32rem;
190 | }
191 |
192 | .info-content{
193 | display: block;
194 | margin-top: .56rem;
195 |
196 | .line {
197 | vertical-align: middle;
198 | width: 2.24rem;
199 | font-size: 0;
200 | border-top: 1px solid rgba(255, 255, 255, 0.2);
201 | }
202 |
203 | .info{
204 | font-size: 14px;
205 | font-weight: 700;
206 | margin-left: .24rem;
207 | margin-right: .24rem;
208 | }
209 | }
210 |
211 | .discount-list{
212 | display: block;
213 | margin-top: .48rem;
214 | text-align: left;
215 | margin-left: .96rem;
216 |
217 | .support{
218 | margin-top: .24rem;
219 | display: block;
220 |
221 | .type{
222 | width: .32rem;
223 | height: .32rem;
224 | display: inline-block;
225 | margin-right: .12rem;
226 | }
227 |
228 | .description{
229 | font-size: 12px;
230 | font-weight: 200;
231 | line-height: 12px;
232 | }
233 | }
234 | }
235 |
236 | .bulletin-content{
237 | display: block;
238 | padding: .48rem .96rem 0;
239 | font-size: 12px;
240 | font-weight: 200;
241 | line-height: 24px;
242 | text-align: left;
243 | }
244 | }
245 | }
246 |
247 | .detail-close{
248 | position: relative;
249 | width: .64rem;
250 | height: .64rem;
251 | font-size: 32px;
252 | margin: -1.28rem auto 0 auto;
253 | bottom: 0;
254 | clear: both;
255 | }
256 |
257 | }
258 |
259 | .detail-enter{
260 | opacity: 0.1;
261 |
262 | &.detail-enter-active{
263 | opacity: 1;
264 | transition: opacity 500ms ease-in;
265 | }
266 | }
267 |
268 | .detail-leave{
269 | opacity: 1;
270 |
271 | &.detail-leave-active{
272 | opacity: 0.1;
273 | transition: opacity 300ms ease-out;
274 | }
275 | }
276 | }
--------------------------------------------------------------------------------
/src/components/navbar/navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { NavLink, BrowserRouter as Router} from 'react-router-dom';
3 | import './navbar.less'
4 |
5 | export class Navbar extends Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.state = {
10 | goods: '商品',
11 | comment: '评价',
12 | seller: '商家'
13 | };
14 | }
15 |
16 | render() {
17 | return (
18 | <nav className="navbar border-1px">
19 | <ul>
20 | <li className="nav-options"><NavLink activeClassName="active" to="/goods">{this.state.goods}</NavLink></li>
21 | <li className="nav-options"><NavLink activeClassName="active" to="/comment">{this.state.comment}</NavLink></li>
22 | <li className="nav-options"><NavLink activeClassName="active" to="/seller">{this.state.seller}</NavLink></li>
23 | </ul>
24 | </nav>
25 | )
26 | }
27 | }
--------------------------------------------------------------------------------
/src/components/navbar/navbar.less:
--------------------------------------------------------------------------------
1 | @import '../../common/less/mixin.less';
2 |
3 | .navbar{
4 | height: .8rem;
5 | position: relative;
6 | line-height: .8rem;
7 | #border-1px(rgba(7,17,27,0.1));
8 |
9 | ul{
10 | display: flex;
11 | justify-content: center;
12 | height: 100%;
13 |
14 | .nav-options{
15 | flex: 1;
16 | text-align: center;
17 |
18 | a{
19 | display: block;
20 | font-size: 14px;
21 | color: rgb(77, 85, 93);
22 |
23 | &.active{
24 | color: rgb(240, 20, 20);
25 | }
26 | }
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/src/components/star/star.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import classNames from 'classnames';
3 | import './star.less';
4 |
5 | const LENGTH = 5;
6 | const TYPE_ON = 'on';
7 | const TYPE_HALF = 'half';
8 | const TYPE_OFF = 'off';
9 |
10 | function starJudge(score) {
11 | const res = [];
12 | const onNumber = Math.floor(score);
13 | for(let i = 0; i < onNumber; i++){
14 | res.push(TYPE_ON);
15 | }
16 | if(score >= onNumber + 0.5) {
17 | res.push(TYPE_HALF);
18 | for(let i = 0; i < LENGTH - onNumber - 1; i++) {
19 | res.push(TYPE_OFF);
20 | }
21 | }else {
22 | for(let i = 0; i < LENGTH - onNumber; i++) {
23 | res.push(TYPE_OFF);
24 | }
25 | }
26 | return res;
27 | }
28 |
29 | const Star = ({ size, score }) => {
30 | const classMap = starJudge(score);
31 | const starSize = 'star-' + size;
32 |
33 | return (
34 | <ul className="stars">
35 | {classMap.map((item, index) => (
36 | <li key={index} className={classNames(starSize, `${starSize}-${item}`)}></li>
37 | ))}
38 | </ul>
39 | );
40 | }
41 |
42 | export default Star;
--------------------------------------------------------------------------------
/src/components/star/star.less:
--------------------------------------------------------------------------------
1 | @import '../../common/less/mixin.less';
2 |
3 | ul {
4 | display: block;
5 | position: relative;
6 |
7 | &.comment-48{
8 | height: .48rem;
9 | }
10 |
11 | li{
12 | display: inline-block;
13 | background-size: 100% 100%;
14 | vertical-align: top;
15 |
16 | &.star-24{
17 | width: .2rem;
18 | height: .2rem;
19 | margin-right: .6rem;
20 | }
21 |
22 | &.star-24-on{
23 | #bg-image('star24_on');
24 | }
25 |
26 | &.star-24-half{
27 | #bg-image('star24_half');
28 | }
29 |
30 | &.star-24-off{
31 | #bg-image('star24_off');
32 | }
33 |
34 | &.star-36{
35 | width: .3rem;
36 | height: .3rem;
37 | margin-right: .12rem;
38 | }
39 |
40 | &.star-36-on{
41 | #bg-image('star36_on');
42 | }
43 |
44 | &.star-36-half{
45 | #bg-image('star36_half');
46 | }
47 |
48 | &.star-36-off{
49 | #bg-image('star36_off');
50 | }
51 |
52 | &.star-48{
53 | width: .4rem;
54 | height: .4rem;
55 | margin-right: .44rem;
56 | }
57 |
58 | &.star-48-on{
59 | #bg-image('star48_on');
60 | }
61 |
62 | &.star-48-half{
63 | #bg-image('star48_half');
64 | }
65 |
66 | &.star-48-off{
67 | #bg-image('star48_off');
68 | }
69 | }
70 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { App } from './App.jsx';
4 | import './common/less/index.less';
5 |
6 |
7 | ReactDOM.render(<App />, document.getElementById('root'));
--------------------------------------------------------------------------------
/static/css/reset.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
3 | * http://cssreset.com
4 | */
5 | html, body, div, span, applet, object, iframe,
6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7 | a, abbr, acronym, address, big, cite, code,
8 | del, dfn, em, img, ins, kbd, q, s, samp,
9 | small, strike, strong, sub, sup, tt, var,
10 | b, u, i, center,
11 | dl, dt, dd, ol, ul, li,
12 | fieldset, form, label, legend,
13 | table, caption, tbody, tfoot, thead, tr, th, td,
14 | article, aside, canvas, details, embed,
15 | figure, figcaption, footer, header,
16 | menu, nav, output, ruby, section, summary,
17 | time, mark, audio, video, input {
18 | margin: 0;
19 | padding: 0;
20 | border: 0;
21 | font-weight: normal;
22 | vertical-align: baseline;
23 | }
24 |
25 | /* HTML5 display-role reset for older browsers */
26 | article, aside, details, figcaption, figure,
27 | footer, header, menu, nav, section {
28 | display: block;
29 | }
30 |
31 | body {
32 | font-size: 0.14rem;
33 | line-height: 1;
34 | }
35 |
36 | blockquote, q {
37 | quotes: none;
38 | }
39 |
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: none;
43 | }
44 |
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
49 |
50 | /* custom */
51 | a {
52 | color: #7e8c8d;
53 | text-decoration: none;
54 | -webkit-backface-visibility: hidden;
55 | }
56 |
57 | li {
58 | list-style: none;
59 | }
60 |
61 | ::-webkit-scrollbar {
62 | width: 5px;
63 | height: 5px;
64 | }
65 |
66 | ::-webkit-scrollbar-track-piece {
67 | background-color: rgba(0, 0, 0, 0.2);
68 | -webkit-border-radius: 6px;
69 | }
70 |
71 | ::-webkit-scrollbar-thumb:vertical {
72 | height: 5px;
73 | background-color: rgba(125, 125, 125, 0.7);
74 | -webkit-border-radius: 6px;
75 | }
76 |
77 | ::-webkit-scrollbar-thumb:horizontal {
78 | width: 5px;
79 | background-color: rgba(125, 125, 125, 0.7);
80 | -webkit-border-radius: 6px;
81 | }
82 |
83 | html, body {
84 | width: 100%;
85 | }
86 |
87 | body {
88 | -webkit-text-size-adjust: none;
89 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
90 | }
91 |
--------------------------------------------------------------------------------
/static/js/rem.js:
--------------------------------------------------------------------------------
1 | (function(win, doc){
2 | const docEl = document.documentElement,
3 | resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
4 | recalc = function() {
5 | var clientWidth = docEl.clientWidth;
6 | if(!clientWidth) return;
7 | docEl.style.fontSize = clientWidth / 7.5 + 'px';
8 | };
9 |
10 | if(!doc.addEventListener) return;
11 |
12 | doc.addEventListener(resizeEvt, recalc, false);
13 | doc.addEventListener('DOMContentLoaded', recalc, false);
14 | })(window, document);
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
3 | const HTMLWebpackPlugin = require('html-webpack-plugin');
4 | const extractText = new ExtractTextPlugin({
5 | filename: 'bundle.css'
6 | });
7 |
8 | const htmlPlugin = new HTMLWebpackPlugin({
9 | template: './index.html',
10 | filename: 'index.html',
11 | inject: 'body'
12 | });
13 |
14 | module.exports = {
15 | entry: './src/index.js',
16 |
17 | output: {
18 | filename: 'bundle.js',
19 | path: path.resolve(__dirname, 'dist'),
20 | publicPath: '/dist'
21 | },
22 |
23 | module: {
24 | rules: [
25 | {
26 | test: /\.(js|jsx)$/,
27 | loader: 'babel-loader',
28 | exclude: /node_modules/
29 | },
30 | {
31 | test: /\.(css|less)$/,
32 | use: extractText.extract({
33 | use: ['css-loader', 'less-loader']
34 | })
35 | },
36 | {
37 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
38 | loader: 'url-loader?limit=10000&name=./static/imgs/[hash].[ext]'
39 | },
40 | {
41 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
42 | loader: 'url-loader?limit=10000'
43 | }
44 | ]
45 | },
46 |
47 | plugins: [
48 | extractText,
49 | htmlPlugin
50 | ]
51 | }
--------------------------------------------------------------------------------
127 |