Merge branch 'feature/gemer' of http://face3d.4dage.com:7005/chenzhiguang/qjkankan_v1.1.1 into feature/gemer

packages/qjkankan-editor/public/static/template/customTooltip.xml

@@ -41,16 +41,27 @@
          set(hotspot[get(hsp_name)].height,%8);
          set(hotspot[get(hsp_name)].width,%8);
          set(hotspot[get(hsp_name)].crop,'');
-         <!-- txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label(get(%1));"); -->
-        if(%2 == 2,
-         trace('ser_frame::',get(framewidth));
-         set(hotspot[get(hsp_name)].url,get(iconUrl));
-         set(hotspot[get(hsp_name)].framewidth,get(framewidth));
-         set(hotspot[get(hsp_name)].frames,get(frameNumber));
 
-         crop_animation_r_stop(get(hsp_name));
-
-         txtadd(hotspot[get(hsp_name)].onloaded,"trace('onloaded::',get(frameNumber),get(framewidth));do_crop_animation(get(framewidth),get(framewidth),get(frameNumber));"););
+            <!-- 默认 -->
+            if(%2 == 0,
+            txtreplace(iconUrl,'.svg','.png');
+            trace('system::',get(iconUrl));
+            set(hotspot[get(hsp_name)].url,get(iconUrl));
+            set(hotspot[get(hsp_name)].frameNumber,60);
+            set(hotspot[get(hsp_name)].duration,1);
+            set(hotspot[get(hsp_name)].frameRate,calc(1.0 / 60));
+            set(hotspot[get(hsp_name)].framewidth,84);
+            <!-- txtadd(hotspot[get(hsp_name)].onloaded,"do_crop_animation(84,84,60);"); -->
+           
+            );
+         
+            if(%2 == 2,
+            trace('ser_frame::',get(framewidth));
+            set(hotspot[get(hsp_name)].url,get(iconUrl));
+            set(hotspot[get(hsp_name)].framewidth,get(framewidth));
+            set(hotspot[get(hsp_name)].frameNumber,get(frameNumber));
+            crop_animation_r_stop(get(hsp_name));
+          
         );
         
         <!-- 个性化标签（3） -->
@@ -65,7 +76,8 @@
             set_label_dir(get(hsp_name),get(lineDirection),0);
            
         );
-
+        txtadd(hotspot[get(hsp_name)].onloaded,"do_crop_animation(get(framewidth),get(framewidth),get(frameRate));"););
+        trace('last_add::',hotspot[get(hsp_name)].onloaded);
         addhotspot(get(hsp_name));
     </action>
 
@@ -75,28 +87,38 @@
         registerattribute(frames, calc(xframes * yframes));
         registerattribute(frame, 0); 
         registerattribute(animatiedOn, 1); 
-        registerattribute(frameRate, calc(1.0 / %3)); 
+        registerattribute(frameRate, %3);
+        trace('imagewidth::',imagewidth,'::imageheight::',imageheight);
         set(crop, '0|0|%1|%2'); 
         clearinterval(calc('crop_anim_' + name));
+        if(%3 == '' OR frameRate == 0 OR isNaN(frameRate),
+        set(frameRate,calc(1.0 / 60));
+        trace('没有frameRate',get(calc(1.0 / 60)));
+        trace('没有frameRate-1',get(frameRate));
+        );
+        trace('params::1::',%1,'::2::',%2,'::3::',%3,':frameRate:',get(frameRate));
+        trace('xframes1::',get(xframes),'::yframes1::',get(yframes));
+ 
+               
         if(frameRate GE 0,
         setinterval(
             calc('crop_anim_' + name),
             get(frameRate),
             if(loaded, 
                 inc(frame); 
+                <!-- trace('frame::',get(frame),'xframes2::',get(xframes),'::yframes2::',get(yframes)); -->
                 if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
                 mod(xpos,frame, xframes); 
                 div(ypos, frame, xframes);
-                <!-- trace('onging::',get(frames)); -->
                 Math.floor(ypos);
                 mul(xpos, %1);
                 mul(ypos, %2); 
                 calc(crop, xpos +'|' + ypos + '|%1|%2');
-             
+ 
                 if(animatiedOn == 0, 
-                 clearinterval(calc('crop_anim_' + name));
-                );
-,
+                 calc(stopAniCrop,'0|0|'+imagewidth+'|'+imageheight +'|');
+                 set(crop, stopAniCrop);
+                );,
                 clearinterval(calc('crop_anim_' + name));
             );
         );
@@ -155,8 +177,11 @@
         txtadd(layer[get(tooltipname)].parent, 'hotspot[', get(name), ']');
         set(layer[get(tooltipname)].autowidth, true);
         set(layer[get(tooltipname)].width,'prop');
-        <!-- set(layer[get(tooltipname)].height,30);  -->
-        set(layer[get(tooltipname)].height,30); 
+
+        <!-- if(hotspottitle == '', trace('title-empty'); set(layer[get(tooltipname)].autoheight,true); );
+        ifnot(hotspottitle == '', trace('title-no-empty');set(layer[get(tooltipname)].autoheight,true);); -->
+
+        set(layer[get(tooltipname)].autoheight,true); 
         set(layer[get(tooltipname)].edge,center);
         set(layer[get(tooltipname)].background,false);
         set(layer[get(tooltipname)].pos,pos);
@@ -198,6 +223,8 @@
     <action name='add_tooltip_dot'>
         txtadd(tooldot, 'tooldot_', get(name)); 
         <!-- trace('hey::',get(borderColor)); -->
+
+        <!-- trace('add-dot-type::',get(name),'::',get(hotspottype)); -->
         addlayer(get(tooldot));
         txtadd(layer[get(tooldot)].parent, 'hotspot[', get(name), ']');
         set(layer[get(tooldot)].width,10); 
@@ -237,26 +264,28 @@
         get(dir)==1,
         <!-- trace('set_label_dir::1::',get(dirItem),'::2::',get(lineDirection),'::3::',get(dir)); -->
         copy(labelWidth,layer[get(dirItem)].width);
-        <!-- trace('dirItem::',get(layer[get(dirItem)].width)); -->
+        copy(labelHeight,layer[get(dirItem)].height);
+  
+  
      );
 
         if(
              get(lineDirection) == 'right-top',
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,35));
-            if(get(dir)==1,set(layer[get(dirItem)].rotate,-35);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-60););
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,-1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight));set(layer[get(dirItem)].rotate,-35););
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,40););
         );
         if(
              get(lineDirection) == 'right-center',
              if(get(dir)==0,set(hotspot[get(dirItem)].rotate,90););
-             <!-- if(get(dir)==1,set(layer[get(dirItem)].rotate,-90);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-80)); -->
              if(get(dir)==1,
-                trace('labelWidth::',labelWidth);
                 set(layer[get(dirItem)].rotate,-90);
+               add(allWidth,labelWidth,80);
+                div(allWidth,2);
+                mul(allWidth,-1);
+                trace('allWidth::',get(allWidth));
                 set(layer[get(dirItem)].x,0);
-                sub(labelWidth,25);
-                mul(labelWidth,-1);
-                set(layer[get(dirItem)].y,get(labelWidth));
+                set(layer[get(dirItem)].y,get(allWidth));
                 );
            
              if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,40););
@@ -264,23 +293,29 @@
         if(
              get(lineDirection) == 'right-bottom',
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,-35));
-            if(get(dir)==1,set(layer[get(dirItem)].rotate,35);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,60));
-            if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight));set(layer[get(dirItem)].rotate,35););
+           if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
         );
         if(
              get(lineDirection) == 'center-top',
-            if(get(dir)==0,set(hotspot[get(dirItem)].rotate,0));
-            if(get(dir)==1,set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-60));
+            if(get(dir)==0,
+            set(hotspot[get(dirItem)].rotate,0);
+            );
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,-1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight)););
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,40););
         );
         if(get(lineDirection) == 'center-bottom',
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,0));
-            if(get(dir)==1,set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,55));
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,1);
+               set(layer[get(dirItem)].rotate,0);
+               set(layer[get(dirItem)].x,0);
+               set(layer[get(dirItem)].y,get(allHeight));     
+              );
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
         );
         if( get(lineDirection) == 'left-top',
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,-35));
-   ;        if(get(dir)==1,set(layer[get(dirItem)].rotate,35);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-60));
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,-1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight));set(layer[get(dirItem)].rotate,35););
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,40););
         );
         if(
@@ -289,16 +324,18 @@
              
              if(get(dir)==1,
                 set(layer[get(dirItem)].rotate,-90);
+               add(allWidth,labelWidth,80);
+                div(allWidth,2);
+                trace('allWidth::',get(allWidth));
                 set(layer[get(dirItem)].x,0);
-                sub(labelWidth,25);
-                set(layer[get(dirItem)].y,get(labelWidth));
+                set(layer[get(dirItem)].y,get(allWidth));
                 );
              if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
         );
         if(
             get(lineDirection) == 'left-bottom',
             if(get(dir)==0,set(hotspot[get(dirItem)].rotate,35));
-            if(get(dir)==1,set(layer[get(dirItem)].rotate,-35);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,60));
+            if(get(dir)==1,add(allHeight,labelHeight,80);div(allHeight,2);mul(allHeight,1);set(layer[get(dirItem)].rotate,0);set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,get(allHeight));set(layer[get(dirItem)].rotate,-35););
             if(get(dir)==2,set(layer[get(dirItem)].x,0);set(layer[get(dirItem)].y,-40););
 
         );
@@ -322,7 +359,8 @@
             pos == 'top',
             add(all,lheight,hheight);
             div(dpy,all,2); 
-            add(lastPy,dpy,10);
+            add(lastPy,dpy,5);
+            trace('dpy::',dpy);
             mul(lastPy, -1);
             set(layer[get(posName)].align,center);
             set(layer[get(posName)].y,get(lastPy));
@@ -332,7 +370,7 @@
             pos == 'bottom',
             add(all,lheight,hheight);
             div(dpy,all,2); 
-            add(lastPy,dpy,10);
+            add(lastPy,dpy,5);
             mul(lastPy, 1);
             set(layer[get(posName)].align,center);
             set(layer[get(posName)].y,get(lastPy));
@@ -383,49 +421,42 @@
       set(dImage,'static/panoassets/images/hotspot/image_place_holder.png');
       txtadd(hsLabel, 'tooltip_', %1); 
       txtadd(hsDot, 'tooldot_', %1); 
+      set(hotspot[get(hsp_name)].hotspottype,%2);
+      set(hotspot[get(hsp_name)].keep,true);
       set(hotspot[get(hsp_name)].hotspottitle,%3);
+      set(hotspot[get(hsp_name)].hotlink,%7);
       set(hotspot[get(hsp_name)].hotspotStyle,%10);
       copy(hotspot[get(hsp_name)].borderWidth,false);
       copy(layer[get(hsLabel)].borderWidth,false);
       copy(layer[get(hsDot)].borderWidth,false);
       set(hotspot[get(hsp_name)].background,false);
       txtsplit(%10,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber,framewidth);
-      txtadd(labelCode, '<div style="min-height:30px; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor) ,'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','        <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',%3,'</div>
+      txtadd(labelCode, '<div style=" display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor) ,'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','        <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',%3,'</div>
     </div>');     
       copy(layer[get(hsLabel)].html, labelCode);
       copy(layer[get(hsLabel)].pos, pos);
       trace('editJQHotspot',%1,'::type::',%3);
 
-      if(%3 == '', 
-        trace('title-empty');
-        set(layer[get(hsLabel)].height,12));
-      
-        <!-- if(%3 == '', 
-         trace('title-empty');
-        set(layer[get(hsLabel)].height,12)
-         );
-        ifnot(%3 == '',trace('has-title'); set(layer[get(hsLabel)].height,30);); -->
-
       if(get(hsp_type) == 3,
-  
-        set(hotspot[get(hsp_name)].rotate,0);
-        set(layer[get(hsLabel)].rotate,0)
-        set(hotspot[get(hsp_name)].type,'text');
+        trace('edit3::',get(hsp_name));
+        set(hotspot[get(hsp_name)].animatiedOn,0);
+        copy(hotspot[get(hsp_name)].rotate,0);
+        copy(layer[get(hsLabel)].rotate,0);
+
+        set(hotspot[get(hsp_name)].type,"text");
+          set(hotspot[get(hsp_name)].width,1);
         set(hotspot[get(hsp_name)].width,1);
         set(hotspot[get(hsp_name)].height,80);
         set(hotspot[get(hsp_name)].padding,0);
-
         
         txtadd(line,'<div style="background-color: ',get(borderColor),';width:1px;height:80px;"></div>');
-        txtadd(dot,'<div style="background-color: ',get(borderColor),';width:10px;height:10px;"></div>');
+        <!-- txtadd(dot,'<div style="background-color: ',get(borderColor),';width:10px;height:10px;"></div>'); -->
         copy(hotspot[get(hsp_name)].html,line);
-        copy(layer[get(hsDot)].html,dot);
-        set(layer[get(hsDot)].visible,true);
 
         set_label_dir(get(hsp_name),get(lineDirection),0);
         set_label_dir(get(hsLabel),get(lineDirection),1);
         set_label_dir(get(hsDot),get(lineDirection),2);
-
+    
        );
       if(get(hsp_type) LE 2,
         trace('edit2::',get(hsp_name));
@@ -435,45 +466,58 @@
         set(hotspot[get(hsp_name)].height,%8);
         set(hotspot[get(hsp_name)].width,%8);
 
-       delayedcall(0.1,
-       txtadd(tooltipname, 'tooltip_', get(hsp_name)); 
-       set_label_pos(get(tooltipname),get(layer[get(tooltipname)].pos));
-       );
-       <!-- 序列化类型编辑 -->
-        if(get(hsp_type) == 2, 
-         indexoftxt(index, get(iconUrl), 'image_place_holder.png');
+        delayedcall(0.1,txtadd(tooltipname, 'tooltip_', get(hsp_name)); set_label_pos(get(tooltipname),get(layer[get(tooltipname)].pos)););
+        
+        indexoftxt(index, get(iconUrl), 'image_place_holder.png');
  
          if(get(index) GT -1,trace('place-holder');
           set(hotspot[get(hsp_name)].animatiedOn,0);
-          set(hotspot[get(hsp_name)].crop,'');
-          crop_animation_r_stop(get(hsp_name));
+          trace('默认图::');
+          delayedcall(0.2, set(hotspot[get(hsp_name)].crop,'0|0|204|204'););
           );
-
-         ifnot(get(index) GT -1, 
-          set(hotspot[get(hsp_name)].animatiedOn,0);
+        ifnot(get(index) GT -1,trace('place-holder');set(hotspot[get(hsp_name)].animatiedOn,1););
+       
+       if(get(hsp_type) == 0,
+           txtreplace(iconUrl,'.svg','.png');
+           trace('system::',get(iconUrl));
+           set(hotspot[get(hsp_name)].url,get(iconUrl));
+           set(hotspot[get(hsp_name)].animatiedOn,1);
+        );
+        if(get(hsp_type) == 1,
+           set(hotspot[get(hsp_name)].animatiedOn,0);
+        );
+       <!-- 序列化类型编辑 -->
+        if(get(hsp_type) == 2, 
+          <!-- set(hotspot[get(hsp_name)].animatiedOn,1); -->
+          <!-- delayedcall(0.2,set(hotspot[get(hsp_name)].animatiedOn,1);); -->
           set(hotspot[get(hsp_name)].visible,true);
-          set(hotspot[get(hsp_name)].frames,get(frameNumber));
           calc(frameRate, duration / frameNumber);
 
-          set(hotspot[get(hsp_name)].frameRate,get(frameRate));
-
           trace('frameRate::',get(frameRate));
           trace('frameNumber::',get(frameNumber));
           trace('framewidth::',get(framewidth));
           trace('duration::',get(duration));
-          set(hotspot[get(hsp_name)].xframes,1);
-          set(hotspot[get(hsp_name)].yframes,1,get(frameNumber));
-         crop_animation_reapply(get(hsp_name),get(frameRate),get(framewidth),get(frameNumber));
-          <!-- do_crop_animation(get(hsp_name),get(frameRate),get(frameNumber)); -->
-        <!-- do_crop_animation(get(framewidth),get(framewidth),get(frameNumber));"); -->
-         );
+          
+          if(!isNaN(frameRate) AND frameRate GT 0,set(hotspot[get(hsp_name)].frameRate,get(frameRate)));
+          if(!isNaN(framewidth) AND framewidth GT 0,set(hotspot[get(hsp_name)].framewidth,get(framewidth)));
+          if(!isNaN(frameNumber) AND frameNumber GT 0,set(hotspot[get(hsp_name)].frameNumber,get(frameNumber)));
+
+          <!-- trace('animatiedOn::',get(hotspot[get(hsp_name)].animatiedOn)); -->
+          <!-- set(hotspot[get(hsp_name)].frameNumber,get(frameNumber));
+          set(hotspot[get(hsp_name)].framewidth,get(framewidth)); -->
+         
+
+          <!-- set(hotspot[get(hsp_name)].frameRate,get(frameRate)); -->
+          <!-- set(hotspot[get(hsp_name)].xframes,1);
+          set(hotspot[get(hsp_name)].yframes,1,get(frameNumber)); -->
+          <!-- txtreplace(hotspot[get(hsp_name)].onloaded,"do_crop_animation(84,84,60);","do_crop_animation(get(hsp_name),get(frameRate),get(framewidth),get(frameNumber));"); -->
         );
      
         set(hotspot[get(hsp_name)].url,get(iconUrl));
         set(hotspot[get(hsp_name)].rotate,0);
         set(layer[get(hsLabel)].rotate,0);
-        set(layer[get(hsDot)].visible,false);
-  
+        <!-- set(layer[get(hsDot)].visible,false); -->
+        trace('last_edit::',hotspot[get(hsp_name)].onloaded);
        );
       
 

packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized_tag.vue

@@ -11,14 +11,17 @@
     <div class="svg-wrapper"></div>
 
     <div class="remark-highlight">{{ $i18n.t("hotspot.hotspot_title") }}</div>
-    <div class="title-input-wrapper">
-      <input
-        v-model.trim="hotspot.hotspotTitle"
-        type="text"
-        maxlength="15"
+    <div class="title-input-wrapper has-textarea">
+      <Input
+        ref="titleTextarea"
+        class="titleTextarea"
+        v-model="hotspot.hotspotTitle"
+        type="textarea"
+        maxlength="50"
+        :autosize="{ minRows: 3}"
         :placeholder="$i18n.t('hotspot.title_placeholder')"
       />
-      <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
+      <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
     </div>
 
     <div class="remark">{{ $i18n.t("hotspot.hotspot_title") }}</div>
@@ -117,7 +120,7 @@
 <script>
 import { mapGetters } from "vuex";
 import * as d3 from "d3";
-import { ColorPicker } from "element-ui";
+import { ColorPicker, Input } from "element-ui";
 import Switcher from "@/components/shared/Switcher.vue";
 import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 
@@ -126,6 +129,7 @@ export default {
     Switcher,
     ColorPicker,
     TabbarSwitcherIcon,
+    Input,
   },
   data() {
     return {
@@ -316,7 +320,7 @@ export default {
     selectLineClick(id) {
       setTimeout(() => {
         if (this.svgNode) {
-          console.log("id",  id);
+          console.log("id", id);
           const selectNode = this.svgNode
             .selectAll("rect.endpoint-for-click")
             .filter((d) => {
@@ -327,7 +331,13 @@ export default {
         }
       }, 300);
     },
+    handleTextareaHeight() {
+      let element = this.$refs["titleTextarea"];
+      element.style.height = "18px";
+      element.style.height = element.scrollHeight + "px";
+    },
   },
+
   mounted() {
     this.svgNode = d3
       .select(".svg-wrapper")
@@ -488,7 +498,7 @@ export default {
   > .title-input-wrapper {
     position: relative;
     border: 1px solid rgba(151, 151, 151, 0.2);
-    padding: 0 16px;
+    padding: 5px 0;
     background: #1a1b1d;
     border-radius: 2px;
     height: 36px;
@@ -497,7 +507,8 @@ export default {
     &:focus-within {
       border-color: #0076f6;
     }
-    > input {
+    > input,
+    textarea {
       border: none;
       background: transparent;
       outline: none;
@@ -508,11 +519,16 @@ export default {
       letter-spacing: 1px;
       font-size: 14px;
     }
+    &.has-textarea {
+      min-height: 72px;
+      height: auto;
+      position: relative;
+    }
     > .count {
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 16px;
+      bottom: 10px;
+      // transform: translateY(-50%);
+      right: 10px;
       font-size: 14px;
       color: rgba(255, 255, 255, 0.2);
     }
@@ -586,3 +602,12 @@ export default {
   }
 }
 </style>
+<style lang="less">
+.title-input-wrapper {
+  .el-textarea__inner {
+    background-color: transparent;
+    color: white;
+    border: none;
+  }
+}
+</style>