dlstatic / seven-piece · Commits

Commit 74374977ee36d1fdc6797ae95f0b4932907169eb

Authored by linksgo2011
1 parent 370628ea

add holder label

Inline Side-by-side
Showing 9 changed files with 143 additions and 53 deletions
.gitignore
  View file @7437497
1   -./mages/node_modules
  1 +images/node_modules/
... ...
css/admin.css
  View file @7437497
... ... @@ -179,9 +179,42 @@ header .btns .btn:hover{
179 179 overflow: auto;
180 180 left: 11px;
181 181 top:36px;
182   - background:#f5f5f5;
  182 + background:#fff;
  183 +}
  184 +/*内部占位标签*/
  185 +.simulator .holder{
  186 + -webkit-box-sizing: border-box;
  187 + -moz-box-sizing: border-box;
  188 + box-sizing: border-box;
  189 + position:relative;
  190 + width: 100%;
  191 + height: 180px;
  192 + background: #dddddd;
  193 + border:1px solid #dddddd;
  194 + cursor: pointer;
  195 +}
  196 +.simulator .holder:hover{
  197 + border:1px dashed #f60;
  198 +}
  199 +.simulator .wrap .inner .ops{
  200 + display: inline-block;
  201 + position: absolute;
  202 + right: 10px;
  203 + top: 10px;
  204 +}
  205 +.simulator .holder .m-btn{
  206 + display: inline-block;
  207 + width: 60px;
  208 + height: 30px;
  209 + text-align: center;
  210 + line-height: 30px;
  211 + background: #777;
  212 + color:#fff;
  213 +}
  214 +.simulator .holder .m-btn:hover{
  215 + opacity: .8;
  216 + filter: alpha(opacity=80);
183 217 }
184   -
185 218  
186 219 .flexslider{
187 220 height: 460px;
... ...
css/icon_admin.css
  View file @7437497
... ... @@ -36,40 +36,58 @@ This must be run when you have at least 2 sprites.
36 36 }
37 37 .icon-admin_10 {
38 38 background-image: url(../images/dist/admin_sprite.png);
39   - background-position: -107px 0px;
  39 + background-position: -213px 0px;
40 40 width: 100px;
41 41 height: 56px;
42 42 }
43 43 .icon-admin_11 {
44 44 background-image: url(../images/dist/admin_sprite.png);
45   - background-position: -213px 0px;
  45 + background-position: -107px 0px;
46 46 width: 100px;
47 47 height: 56px;
48 48 }
49 49 .icon-admin_12 {
50 50 background-image: url(../images/dist/admin_sprite.png);
51   - background-position: 0px -62px;
  51 + background-position: -106px -124px;
52 52 width: 100px;
53 53 height: 56px;
54 54 }
55 55 .icon-admin_13 {
56 56 background-image: url(../images/dist/admin_sprite.png);
57   - background-position: -106px -62px;
  57 + background-position: 0px -62px;
58 58 width: 100px;
59 59 height: 56px;
60 60 }
61 61 .icon-admin_14 {
62 62 background-image: url(../images/dist/admin_sprite.png);
63   - background-position: 0px -124px;
  63 + background-position: -106px -62px;
64 64 width: 100px;
65 65 height: 56px;
66 66 }
67 67 .icon-admin_15 {
68 68 background-image: url(../images/dist/admin_sprite.png);
69   - background-position: -106px -124px;
  69 + background-position: 0px -124px;
70 70 width: 100px;
71 71 height: 56px;
72 72 }
  73 +.icon-admin_16 {
  74 + background-image: url(../images/dist/admin_sprite.png);
  75 + background-position: -64px -186px;
  76 + width: 14px;
  77 + height: 14px;
  78 +}
  79 +.icon-admin_17 {
  80 + background-image: url(../images/dist/admin_sprite.png);
  81 + background-position: -84px -186px;
  82 + width: 14px;
  83 + height: 14px;
  84 +}
  85 +.icon-admin_18 {
  86 + background-image: url(../images/dist/admin_sprite.png);
  87 + background-position: -44px -186px;
  88 + width: 14px;
  89 + height: 14px;
  90 +}
73 91 .icon-admin_2 {
74 92 background-image: url(../images/dist/admin_sprite.png);
75 93 background-position: 0px 0px;
... ... @@ -78,25 +96,25 @@ This must be run when you have at least 2 sprites.
78 96 }
79 97 .icon-admin_3 {
80 98 background-image: url(../images/dist/admin_sprite.png);
81   - background-position: 0px -186px;
  99 + background-position: -22px -186px;
82 100 width: 16px;
83 101 height: 20px;
84 102 }
85 103 .icon-admin_4 {
86 104 background-image: url(../images/dist/admin_sprite.png);
87   - background-position: -22px -186px;
  105 + background-position: 0px -186px;
88 106 width: 16px;
89 107 height: 20px;
90 108 }
91 109 .icon-admin_5 {
92 110 background-image: url(../images/dist/admin_sprite.png);
93   - background-position: -58px -186px;
  111 + background-position: -118px -186px;
94 112 width: 8px;
95 113 height: 8px;
96 114 }
97 115 .icon-admin_6 {
98 116 background-image: url(../images/dist/admin_sprite.png);
99   - background-position: -44px -186px;
  117 + background-position: -104px -186px;
100 118 width: 8px;
101 119 height: 8px;
102 120 }
... ... @@ -114,7 +132,7 @@ This must be run when you have at least 2 sprites.
114 132 }
115 133 .icon-angle {
116 134 background-image: url(../images/dist/admin_sprite.png);
117   - background-position: -72px -186px;
  135 + background-position: -132px -186px;
118 136 width: 8px;
119 137 height: 8px;
120 138 }
... ...
css/sprite_admin.less
  View file @7437497
... ... @@ -12,71 +12,104 @@ At the bottom of this section, we provide information about the spritesheet itse
12 12 @spritesheet: width height image @spritesheet-sprites;
13 13 */
14 14 @icon-admin-10-name: 'icon-admin_10';
15   -@icon-admin-10-x: 107px;
  15 +@icon-admin-10-x: 213px;
16 16 @icon-admin-10-y: 0px;
17   -@icon-admin-10-offset-x: -107px;
  17 +@icon-admin-10-offset-x: -213px;
18 18 @icon-admin-10-offset-y: 0px;
19 19 @icon-admin-10-width: 100px;
20 20 @icon-admin-10-height: 56px;
21 21 @icon-admin-10-total-width: 313px;
22 22 @icon-admin-10-total-height: 206px;
23 23 @icon-admin-10-image: '../images/dist/admin_sprite.png';
24   -@icon-admin-10: 107px 0px -107px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_10';
  24 +@icon-admin-10: 213px 0px -213px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_10';
25 25 @icon-admin-11-name: 'icon-admin_11';
26   -@icon-admin-11-x: 213px;
  26 +@icon-admin-11-x: 107px;
27 27 @icon-admin-11-y: 0px;
28   -@icon-admin-11-offset-x: -213px;
  28 +@icon-admin-11-offset-x: -107px;
29 29 @icon-admin-11-offset-y: 0px;
30 30 @icon-admin-11-width: 100px;
31 31 @icon-admin-11-height: 56px;
32 32 @icon-admin-11-total-width: 313px;
33 33 @icon-admin-11-total-height: 206px;
34 34 @icon-admin-11-image: '../images/dist/admin_sprite.png';
35   -@icon-admin-11: 213px 0px -213px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_11';
  35 +@icon-admin-11: 107px 0px -107px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_11';
36 36 @icon-admin-12-name: 'icon-admin_12';
37   -@icon-admin-12-x: 0px;
38   -@icon-admin-12-y: 62px;
39   -@icon-admin-12-offset-x: 0px;
40   -@icon-admin-12-offset-y: -62px;
  37 +@icon-admin-12-x: 106px;
  38 +@icon-admin-12-y: 124px;
  39 +@icon-admin-12-offset-x: -106px;
  40 +@icon-admin-12-offset-y: -124px;
41 41 @icon-admin-12-width: 100px;
42 42 @icon-admin-12-height: 56px;
43 43 @icon-admin-12-total-width: 313px;
44 44 @icon-admin-12-total-height: 206px;
45 45 @icon-admin-12-image: '../images/dist/admin_sprite.png';
46   -@icon-admin-12: 0px 62px 0px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_12';
  46 +@icon-admin-12: 106px 124px -106px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_12';
47 47 @icon-admin-13-name: 'icon-admin_13';
48   -@icon-admin-13-x: 106px;
  48 +@icon-admin-13-x: 0px;
49 49 @icon-admin-13-y: 62px;
50   -@icon-admin-13-offset-x: -106px;
  50 +@icon-admin-13-offset-x: 0px;
51 51 @icon-admin-13-offset-y: -62px;
52 52 @icon-admin-13-width: 100px;
53 53 @icon-admin-13-height: 56px;
54 54 @icon-admin-13-total-width: 313px;
55 55 @icon-admin-13-total-height: 206px;
56 56 @icon-admin-13-image: '../images/dist/admin_sprite.png';
57   -@icon-admin-13: 106px 62px -106px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_13';
  57 +@icon-admin-13: 0px 62px 0px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_13';
58 58 @icon-admin-14-name: 'icon-admin_14';
59   -@icon-admin-14-x: 0px;
60   -@icon-admin-14-y: 124px;
61   -@icon-admin-14-offset-x: 0px;
62   -@icon-admin-14-offset-y: -124px;
  59 +@icon-admin-14-x: 106px;
  60 +@icon-admin-14-y: 62px;
  61 +@icon-admin-14-offset-x: -106px;
  62 +@icon-admin-14-offset-y: -62px;
63 63 @icon-admin-14-width: 100px;
64 64 @icon-admin-14-height: 56px;
65 65 @icon-admin-14-total-width: 313px;
66 66 @icon-admin-14-total-height: 206px;
67 67 @icon-admin-14-image: '../images/dist/admin_sprite.png';
68   -@icon-admin-14: 0px 124px 0px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_14';
  68 +@icon-admin-14: 106px 62px -106px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_14';
69 69 @icon-admin-15-name: 'icon-admin_15';
70   -@icon-admin-15-x: 106px;
  70 +@icon-admin-15-x: 0px;
71 71 @icon-admin-15-y: 124px;
72   -@icon-admin-15-offset-x: -106px;
  72 +@icon-admin-15-offset-x: 0px;
73 73 @icon-admin-15-offset-y: -124px;
74 74 @icon-admin-15-width: 100px;
75 75 @icon-admin-15-height: 56px;
76 76 @icon-admin-15-total-width: 313px;
77 77 @icon-admin-15-total-height: 206px;
78 78 @icon-admin-15-image: '../images/dist/admin_sprite.png';
79   -@icon-admin-15: 106px 124px -106px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_15';
  79 +@icon-admin-15: 0px 124px 0px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_15';
  80 +@icon-admin-16-name: 'icon-admin_16';
  81 +@icon-admin-16-x: 64px;
  82 +@icon-admin-16-y: 186px;
  83 +@icon-admin-16-offset-x: -64px;
  84 +@icon-admin-16-offset-y: -186px;
  85 +@icon-admin-16-width: 14px;
  86 +@icon-admin-16-height: 14px;
  87 +@icon-admin-16-total-width: 313px;
  88 +@icon-admin-16-total-height: 206px;
  89 +@icon-admin-16-image: '../images/dist/admin_sprite.png';
  90 +@icon-admin-16: 64px 186px -64px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_16';
  91 +@icon-admin-17-name: 'icon-admin_17';
  92 +@icon-admin-17-x: 84px;
  93 +@icon-admin-17-y: 186px;
  94 +@icon-admin-17-offset-x: -84px;
  95 +@icon-admin-17-offset-y: -186px;
  96 +@icon-admin-17-width: 14px;
  97 +@icon-admin-17-height: 14px;
  98 +@icon-admin-17-total-width: 313px;
  99 +@icon-admin-17-total-height: 206px;
  100 +@icon-admin-17-image: '../images/dist/admin_sprite.png';
  101 +@icon-admin-17: 84px 186px -84px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_17';
  102 +@icon-admin-18-name: 'icon-admin_18';
  103 +@icon-admin-18-x: 44px;
  104 +@icon-admin-18-y: 186px;
  105 +@icon-admin-18-offset-x: -44px;
  106 +@icon-admin-18-offset-y: -186px;
  107 +@icon-admin-18-width: 14px;
  108 +@icon-admin-18-height: 14px;
  109 +@icon-admin-18-total-width: 313px;
  110 +@icon-admin-18-total-height: 206px;
  111 +@icon-admin-18-image: '../images/dist/admin_sprite.png';
  112 +@icon-admin-18: 44px 186px -44px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_18';
80 113 @icon-admin-2-name: 'icon-admin_2';
81 114 @icon-admin-2-x: 0px;
82 115 @icon-admin-2-y: 0px;
... ... @@ -89,49 +122,49 @@ At the bottom of this section, we provide information about the spritesheet itse
89 122 @icon-admin-2-image: '../images/dist/admin_sprite.png';
90 123 @icon-admin-2: 0px 0px 0px 0px 101px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_2';
91 124 @icon-admin-3-name: 'icon-admin_3';
92   -@icon-admin-3-x: 0px;
  125 +@icon-admin-3-x: 22px;
93 126 @icon-admin-3-y: 186px;
94   -@icon-admin-3-offset-x: 0px;
  127 +@icon-admin-3-offset-x: -22px;
95 128 @icon-admin-3-offset-y: -186px;
96 129 @icon-admin-3-width: 16px;
97 130 @icon-admin-3-height: 20px;
98 131 @icon-admin-3-total-width: 313px;
99 132 @icon-admin-3-total-height: 206px;
100 133 @icon-admin-3-image: '../images/dist/admin_sprite.png';
101   -@icon-admin-3: 0px 186px 0px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_3';
  134 +@icon-admin-3: 22px 186px -22px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_3';
102 135 @icon-admin-4-name: 'icon-admin_4';
103   -@icon-admin-4-x: 22px;
  136 +@icon-admin-4-x: 0px;
104 137 @icon-admin-4-y: 186px;
105   -@icon-admin-4-offset-x: -22px;
  138 +@icon-admin-4-offset-x: 0px;
106 139 @icon-admin-4-offset-y: -186px;
107 140 @icon-admin-4-width: 16px;
108 141 @icon-admin-4-height: 20px;
109 142 @icon-admin-4-total-width: 313px;
110 143 @icon-admin-4-total-height: 206px;
111 144 @icon-admin-4-image: '../images/dist/admin_sprite.png';
112   -@icon-admin-4: 22px 186px -22px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_4';
  145 +@icon-admin-4: 0px 186px 0px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_4';
113 146 @icon-admin-5-name: 'icon-admin_5';
114   -@icon-admin-5-x: 58px;
  147 +@icon-admin-5-x: 118px;
115 148 @icon-admin-5-y: 186px;
116   -@icon-admin-5-offset-x: -58px;
  149 +@icon-admin-5-offset-x: -118px;
117 150 @icon-admin-5-offset-y: -186px;
118 151 @icon-admin-5-width: 8px;
119 152 @icon-admin-5-height: 8px;
120 153 @icon-admin-5-total-width: 313px;
121 154 @icon-admin-5-total-height: 206px;
122 155 @icon-admin-5-image: '../images/dist/admin_sprite.png';
123   -@icon-admin-5: 58px 186px -58px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_5';
  156 +@icon-admin-5: 118px 186px -118px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_5';
124 157 @icon-admin-6-name: 'icon-admin_6';
125   -@icon-admin-6-x: 44px;
  158 +@icon-admin-6-x: 104px;
126 159 @icon-admin-6-y: 186px;
127   -@icon-admin-6-offset-x: -44px;
  160 +@icon-admin-6-offset-x: -104px;
128 161 @icon-admin-6-offset-y: -186px;
129 162 @icon-admin-6-width: 8px;
130 163 @icon-admin-6-height: 8px;
131 164 @icon-admin-6-total-width: 313px;
132 165 @icon-admin-6-total-height: 206px;
133 166 @icon-admin-6-image: '../images/dist/admin_sprite.png';
134   -@icon-admin-6: 44px 186px -44px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_6';
  167 +@icon-admin-6: 104px 186px -104px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_6';
135 168 @icon-admin-7-name: 'icon-admin_7';
136 169 @icon-admin-7-x: 213px;
137 170 @icon-admin-7-y: 124px;
... ... @@ -155,20 +188,20 @@ At the bottom of this section, we provide information about the spritesheet itse
155 188 @icon-admin-9-image: '../images/dist/admin_sprite.png';
156 189 @icon-admin-9: 213px 62px -213px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_9';
157 190 @icon-angle-name: 'icon-angle';
158   -@icon-angle-x: 72px;
  191 +@icon-angle-x: 132px;
159 192 @icon-angle-y: 186px;
160   -@icon-angle-offset-x: -72px;
  193 +@icon-angle-offset-x: -132px;
161 194 @icon-angle-offset-y: -186px;
162 195 @icon-angle-width: 8px;
163 196 @icon-angle-height: 8px;
164 197 @icon-angle-total-width: 313px;
165 198 @icon-angle-total-height: 206px;
166 199 @icon-angle-image: '../images/dist/admin_sprite.png';
167   -@icon-angle: 72px 186px -72px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-angle';
  200 +@icon-angle: 132px 186px -132px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-angle';
168 201 @spritesheet-width: 313px;
169 202 @spritesheet-height: 206px;
170 203 @spritesheet-image: '../images/dist/admin_sprite.png';
171   -@spritesheet-sprites: @icon-admin-10 @icon-admin-11 @icon-admin-12 @icon-admin-13 @icon-admin-14 @icon-admin-15 @icon-admin-2 @icon-admin-3 @icon-admin-4 @icon-admin-5 @icon-admin-6 @icon-admin-7 @icon-admin-9 @icon-angle;
  204 +@spritesheet-sprites: @icon-admin-10 @icon-admin-11 @icon-admin-12 @icon-admin-13 @icon-admin-14 @icon-admin-15 @icon-admin-16 @icon-admin-17 @icon-admin-18 @icon-admin-2 @icon-admin-3 @icon-admin-4 @icon-admin-5 @icon-admin-6 @icon-admin-7 @icon-admin-9 @icon-angle;
172 205 @spritesheet: 313px 206px '../images/dist/admin_sprite.png' @spritesheet-sprites;
173 206  
174 207 /*
... ...
html/admin.html
  View file @7437497
... ... @@ -48,7 +48,13 @@
48 48 <section class="simulator">
49 49 <div class="wrap">
50 50 <div class="inner">
51   -
  51 + <div class="holder">
  52 + <div class="ops">
  53 + <a href="" class="m-btn btn-up"><i class="m-icon icon-admin_16"></i>上移</a>
  54 + <a href="" class="m-btn btn-setting"><i class="m-icon icon-admin_17"></i> 设置</a>
  55 + <a href="" class="m-btn btn-del"><i class="m-icon icon-admin_18"></i> 删除</a>
  56 + </div>
  57 + </div>
52 58 </div>
53 59 </div>
54 60 </section>
... ...
images/dist/admin_sprite.png
View file @7437497

2.74 KB | W: | H:

3.47 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/src/admin/admin_16.png 0 → 100644
View file @7437497

1.05 KB
images/src/admin/admin_17.png 0 → 100644
View file @7437497

1.19 KB
images/src/admin/admin_18.png 0 → 100644
View file @7437497

1.22 KB