add holder label

linksgo2011
1 parent 370628ea
Showing 9 changed files with 143 additions and 53 deletions
.gitignore
css/admin.css
css/icon_admin.css
css/sprite_admin.less
html/admin.html
images/dist/admin_sprite.png
images/src/admin/admin_16.png
images/src/admin/admin_17.png
images/src/admin/admin_18.png
-./mages/node_modules
+images/node_modules/
@@ -179,9 +179,42 @@ header .btns .btn:hover{
     overflow: auto;
     left: 11px;
     top:36px;
-    background:#f5f5f5;
+    background:#fff;
+}
+/*内部占位标签*/
+.simulator .holder{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position:relative;
+    width: 100%;
+    height: 180px;
+    background: #dddddd;
+    border:1px solid #dddddd;
+    cursor: pointer;
+}
+.simulator .holder:hover{
+    border:1px dashed #f60;
+}
+.simulator .wrap .inner .ops{
+    display: inline-block;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.simulator .holder .m-btn{
+    display: inline-block;
+    width: 60px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    background: #777;
+    color:#fff;
+}
+.simulator .holder .m-btn:hover{
+    opacity: .8;
+    filter: alpha(opacity=80);
 }
-
 .flexslider{
     height: 460px;
@@ -36,40 +36,58 @@ This must be run when you have at least 2 sprites.
 }
 .icon-admin_10 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -107px 0px;
+  background-position: -213px 0px;
   width: 100px;
   height: 56px;
 }
 .icon-admin_11 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -213px 0px;
+  background-position: -107px 0px;
   width: 100px;
   height: 56px;
 }
 .icon-admin_12 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: 0px -62px;
+  background-position: -106px -124px;
   width: 100px;
   height: 56px;
 }
 .icon-admin_13 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -106px -62px;
+  background-position: 0px -62px;
   width: 100px;
   height: 56px;
 }
 .icon-admin_14 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: 0px -124px;
+  background-position: -106px -62px;
   width: 100px;
   height: 56px;
 }
 .icon-admin_15 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -106px -124px;
+  background-position: 0px -124px;
   width: 100px;
   height: 56px;
 }
+.icon-admin_16 {
+  background-image: url(../images/dist/admin_sprite.png);
+  background-position: -64px -186px;
+  width: 14px;
+  height: 14px;
+}
+.icon-admin_17 {
+  background-image: url(../images/dist/admin_sprite.png);
+  background-position: -84px -186px;
+  width: 14px;
+  height: 14px;
+}
+.icon-admin_18 {
+  background-image: url(../images/dist/admin_sprite.png);
+  background-position: -44px -186px;
+  width: 14px;
+  height: 14px;
+}
 .icon-admin_2 {
   background-image: url(../images/dist/admin_sprite.png);
   background-position: 0px 0px;
@@ -78,25 +96,25 @@ This must be run when you have at least 2 sprites.
 }
 .icon-admin_3 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: 0px -186px;
+  background-position: -22px -186px;
   width: 16px;
   height: 20px;
 }
 .icon-admin_4 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -22px -186px;
+  background-position: 0px -186px;
   width: 16px;
   height: 20px;
 }
 .icon-admin_5 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -58px -186px;
+  background-position: -118px -186px;
   width: 8px;
   height: 8px;
 }
 .icon-admin_6 {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -44px -186px;
+  background-position: -104px -186px;
   width: 8px;
   height: 8px;
 }
@@ -114,7 +132,7 @@ This must be run when you have at least 2 sprites.
 }
 .icon-angle {
   background-image: url(../images/dist/admin_sprite.png);
-  background-position: -72px -186px;
+  background-position: -132px -186px;
   width: 8px;
   height: 8px;
 }
@@ -12,71 +12,104 @@ At the bottom of this section, we provide information about the spritesheet itse
 @spritesheet: width height image @spritesheet-sprites;
 */
 @icon-admin-10-name: 'icon-admin_10';
-@icon-admin-10-x: 107px;
+@icon-admin-10-x: 213px;
 @icon-admin-10-y: 0px;
-@icon-admin-10-offset-x: -107px;
+@icon-admin-10-offset-x: -213px;
 @icon-admin-10-offset-y: 0px;
 @icon-admin-10-width: 100px;
 @icon-admin-10-height: 56px;
 @icon-admin-10-total-width: 313px;
 @icon-admin-10-total-height: 206px;
 @icon-admin-10-image: '../images/dist/admin_sprite.png';
-@icon-admin-10: 107px 0px -107px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_10';
+@icon-admin-10: 213px 0px -213px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_10';
 @icon-admin-11-name: 'icon-admin_11';
-@icon-admin-11-x: 213px;
+@icon-admin-11-x: 107px;
 @icon-admin-11-y: 0px;
-@icon-admin-11-offset-x: -213px;
+@icon-admin-11-offset-x: -107px;
 @icon-admin-11-offset-y: 0px;
 @icon-admin-11-width: 100px;
 @icon-admin-11-height: 56px;
 @icon-admin-11-total-width: 313px;
 @icon-admin-11-total-height: 206px;
 @icon-admin-11-image: '../images/dist/admin_sprite.png';
-@icon-admin-11: 213px 0px -213px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_11';
+@icon-admin-11: 107px 0px -107px 0px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_11';
 @icon-admin-12-name: 'icon-admin_12';
-@icon-admin-12-x: 0px;
-@icon-admin-12-y: 62px;
-@icon-admin-12-offset-x: 0px;
-@icon-admin-12-offset-y: -62px;
+@icon-admin-12-x: 106px;
+@icon-admin-12-y: 124px;
+@icon-admin-12-offset-x: -106px;
+@icon-admin-12-offset-y: -124px;
 @icon-admin-12-width: 100px;
 @icon-admin-12-height: 56px;
 @icon-admin-12-total-width: 313px;
 @icon-admin-12-total-height: 206px;
 @icon-admin-12-image: '../images/dist/admin_sprite.png';
-@icon-admin-12: 0px 62px 0px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_12';
+@icon-admin-12: 106px 124px -106px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_12';
 @icon-admin-13-name: 'icon-admin_13';
-@icon-admin-13-x: 106px;
+@icon-admin-13-x: 0px;
 @icon-admin-13-y: 62px;
-@icon-admin-13-offset-x: -106px;
+@icon-admin-13-offset-x: 0px;
 @icon-admin-13-offset-y: -62px;
 @icon-admin-13-width: 100px;
 @icon-admin-13-height: 56px;
 @icon-admin-13-total-width: 313px;
 @icon-admin-13-total-height: 206px;
 @icon-admin-13-image: '../images/dist/admin_sprite.png';
-@icon-admin-13: 106px 62px -106px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_13';
+@icon-admin-13: 0px 62px 0px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_13';
 @icon-admin-14-name: 'icon-admin_14';
-@icon-admin-14-x: 0px;
-@icon-admin-14-y: 124px;
-@icon-admin-14-offset-x: 0px;
-@icon-admin-14-offset-y: -124px;
+@icon-admin-14-x: 106px;
+@icon-admin-14-y: 62px;
+@icon-admin-14-offset-x: -106px;
+@icon-admin-14-offset-y: -62px;
 @icon-admin-14-width: 100px;
 @icon-admin-14-height: 56px;
 @icon-admin-14-total-width: 313px;
 @icon-admin-14-total-height: 206px;
 @icon-admin-14-image: '../images/dist/admin_sprite.png';
-@icon-admin-14: 0px 124px 0px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_14';
+@icon-admin-14: 106px 62px -106px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_14';
 @icon-admin-15-name: 'icon-admin_15';
-@icon-admin-15-x: 106px;
+@icon-admin-15-x: 0px;
 @icon-admin-15-y: 124px;
-@icon-admin-15-offset-x: -106px;
+@icon-admin-15-offset-x: 0px;
 @icon-admin-15-offset-y: -124px;
 @icon-admin-15-width: 100px;
 @icon-admin-15-height: 56px;
 @icon-admin-15-total-width: 313px;
 @icon-admin-15-total-height: 206px;
 @icon-admin-15-image: '../images/dist/admin_sprite.png';
-@icon-admin-15: 106px 124px -106px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_15';
+@icon-admin-15: 0px 124px 0px -124px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_15';
+@icon-admin-16-name: 'icon-admin_16';
+@icon-admin-16-x: 64px;
+@icon-admin-16-y: 186px;
+@icon-admin-16-offset-x: -64px;
+@icon-admin-16-offset-y: -186px;
+@icon-admin-16-width: 14px;
+@icon-admin-16-height: 14px;
+@icon-admin-16-total-width: 313px;
+@icon-admin-16-total-height: 206px;
+@icon-admin-16-image: '../images/dist/admin_sprite.png';
+@icon-admin-16: 64px 186px -64px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_16';
+@icon-admin-17-name: 'icon-admin_17';
+@icon-admin-17-x: 84px;
+@icon-admin-17-y: 186px;
+@icon-admin-17-offset-x: -84px;
+@icon-admin-17-offset-y: -186px;
+@icon-admin-17-width: 14px;
+@icon-admin-17-height: 14px;
+@icon-admin-17-total-width: 313px;
+@icon-admin-17-total-height: 206px;
+@icon-admin-17-image: '../images/dist/admin_sprite.png';
+@icon-admin-17: 84px 186px -84px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_17';
+@icon-admin-18-name: 'icon-admin_18';
+@icon-admin-18-x: 44px;
+@icon-admin-18-y: 186px;
+@icon-admin-18-offset-x: -44px;
+@icon-admin-18-offset-y: -186px;
+@icon-admin-18-width: 14px;
+@icon-admin-18-height: 14px;
+@icon-admin-18-total-width: 313px;
+@icon-admin-18-total-height: 206px;
+@icon-admin-18-image: '../images/dist/admin_sprite.png';
+@icon-admin-18: 44px 186px -44px -186px 14px 14px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_18';
 @icon-admin-2-name: 'icon-admin_2';
 @icon-admin-2-x: 0px;
 @icon-admin-2-y: 0px;
@@ -89,49 +122,49 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-admin-2-image: '../images/dist/admin_sprite.png';
 @icon-admin-2: 0px 0px 0px 0px 101px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_2';
 @icon-admin-3-name: 'icon-admin_3';
-@icon-admin-3-x: 0px;
+@icon-admin-3-x: 22px;
 @icon-admin-3-y: 186px;
-@icon-admin-3-offset-x: 0px;
+@icon-admin-3-offset-x: -22px;
 @icon-admin-3-offset-y: -186px;
 @icon-admin-3-width: 16px;
 @icon-admin-3-height: 20px;
 @icon-admin-3-total-width: 313px;
 @icon-admin-3-total-height: 206px;
 @icon-admin-3-image: '../images/dist/admin_sprite.png';
-@icon-admin-3: 0px 186px 0px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_3';
+@icon-admin-3: 22px 186px -22px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_3';
 @icon-admin-4-name: 'icon-admin_4';
-@icon-admin-4-x: 22px;
+@icon-admin-4-x: 0px;
 @icon-admin-4-y: 186px;
-@icon-admin-4-offset-x: -22px;
+@icon-admin-4-offset-x: 0px;
 @icon-admin-4-offset-y: -186px;
 @icon-admin-4-width: 16px;
 @icon-admin-4-height: 20px;
 @icon-admin-4-total-width: 313px;
 @icon-admin-4-total-height: 206px;
 @icon-admin-4-image: '../images/dist/admin_sprite.png';
-@icon-admin-4: 22px 186px -22px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_4';
+@icon-admin-4: 0px 186px 0px -186px 16px 20px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_4';
 @icon-admin-5-name: 'icon-admin_5';
-@icon-admin-5-x: 58px;
+@icon-admin-5-x: 118px;
 @icon-admin-5-y: 186px;
-@icon-admin-5-offset-x: -58px;
+@icon-admin-5-offset-x: -118px;
 @icon-admin-5-offset-y: -186px;
 @icon-admin-5-width: 8px;
 @icon-admin-5-height: 8px;
 @icon-admin-5-total-width: 313px;
 @icon-admin-5-total-height: 206px;
 @icon-admin-5-image: '../images/dist/admin_sprite.png';
-@icon-admin-5: 58px 186px -58px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_5';
+@icon-admin-5: 118px 186px -118px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_5';
 @icon-admin-6-name: 'icon-admin_6';
-@icon-admin-6-x: 44px;
+@icon-admin-6-x: 104px;
 @icon-admin-6-y: 186px;
-@icon-admin-6-offset-x: -44px;
+@icon-admin-6-offset-x: -104px;
 @icon-admin-6-offset-y: -186px;
 @icon-admin-6-width: 8px;
 @icon-admin-6-height: 8px;
 @icon-admin-6-total-width: 313px;
 @icon-admin-6-total-height: 206px;
 @icon-admin-6-image: '../images/dist/admin_sprite.png';
-@icon-admin-6: 44px 186px -44px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_6';
+@icon-admin-6: 104px 186px -104px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_6';
 @icon-admin-7-name: 'icon-admin_7';
 @icon-admin-7-x: 213px;
 @icon-admin-7-y: 124px;
@@ -155,20 +188,20 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-admin-9-image: '../images/dist/admin_sprite.png';
 @icon-admin-9: 213px 62px -213px -62px 100px 56px 313px 206px '../images/dist/admin_sprite.png' 'icon-admin_9';
 @icon-angle-name: 'icon-angle';
-@icon-angle-x: 72px;
+@icon-angle-x: 132px;
 @icon-angle-y: 186px;
-@icon-angle-offset-x: -72px;
+@icon-angle-offset-x: -132px;
 @icon-angle-offset-y: -186px;
 @icon-angle-width: 8px;
 @icon-angle-height: 8px;
 @icon-angle-total-width: 313px;
 @icon-angle-total-height: 206px;
 @icon-angle-image: '../images/dist/admin_sprite.png';
-@icon-angle: 72px 186px -72px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-angle';
+@icon-angle: 132px 186px -132px -186px 8px 8px 313px 206px '../images/dist/admin_sprite.png' 'icon-angle';
 @spritesheet-width: 313px;
 @spritesheet-height: 206px;
 @spritesheet-image: '../images/dist/admin_sprite.png';
-@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;
+@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;
 @spritesheet: 313px 206px '../images/dist/admin_sprite.png' @spritesheet-sprites;
 /*
@@ -48,7 +48,13 @@
         <section class="simulator">
             <div class="wrap">
                 <div class="inner">
-                    
+                    <div class="holder">
+                        <div class="ops">
+                            <a href="" class="m-btn btn-up"><i class="m-icon icon-admin_16"></i>上移</a>
+                            <a href="" class="m-btn btn-setting"><i class="m-icon icon-admin_17"></i> 设置</a>
+                            <a href="" class="m-btn btn-del"><i class="m-icon icon-admin_18"></i> 删除</a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>