首页增加智算网络显示模块

custom/public/css/git.openi.css

@@ -144,7 +144,8 @@
 #homenews{
   position: relative;
   z-index: 9;
-  bottom: -6em;
+  bottom: -9em;
+  width: 540px;
 }
 #homenews > p{
   color: #BBBBBB;
@@ -154,7 +155,7 @@
   border-radius: 2em;
   background-color: rgba(16, 16, 16, .9);
   position: relative;
-  padding-left: 2.3em !important;
+  padding-left: 1.5em !important;
 }
 .homeorg, .homepro, .homemodel, .i-env{ 
   position: relative;
@@ -163,7 +164,7 @@
 .homenews::before{
   content: '';
   position: absolute;
-  left: 3em;
+  left: 2em;
   top: 0;
   bottom: 0;
   background-color: rgba(105, 192, 255, .4);
@@ -185,7 +186,7 @@
   padding: 0;
 }
 .newslist{
-  height: 325px;
+  height: 285px;
   overflow: hidden;
 }
 
@@ -376,4 +377,55 @@
 
 @media only screen and (min-width: 1920px) {
 
+}
+
+/* rotation3D */
+#app{
+  position: absolute;
+  right: 0px;
+  width: 800px;
+  top: 30px;
+  z-index: 6;
+}
+.aiData{
+  position: absolute;  
+  padding: 10px;
+  right: 10px;
+  background-color: rgba(255, 255, 255, .4);
+  border: 1px solid #FFF;
+  text-align: right;
+  font-size: 0.9rem;
+}
+.aiData strong{
+  font-size: 1.1rem;
+}
+.rotation3D-baseMap{
+  position: absolute; left: 0; right: 0; top: 160px; margin: auto;
+  width: 800px; height: 516px;
+  background: url("../rotation3D/img/baseMap.png") no-repeat;
+  background-size: cover;
+}
+.rotation3D-baseMap::before{
+  position: absolute; 
+  margin: auto; z-index: 99;            
+  left:50%; top: -150px; 
+  transform:translate(-50%,0);
+  width: 342px; height: 470px; display: block; content: '';
+  background: url("../rotation3D/img/baseLogo.svg");
+  /*animation: 10s bounceUpDown infinite;*/
+}
+.rotation3D-baseMap::after{
+  position: absolute; 
+  margin: auto; z-index: 100;
+  left:50%; top:0; 
+  transform:translate(-50%,0);
+  width: 110px; height: 86px; display: block; content: '';
+  background: url("../rotation3D/img/brain.svg");
+  animation: 6s bounceUpDown infinite;
+  mix-blend-mode: color-dodge;
+}
+@keyframes bounceUpDown{
+  0% {transform: translate(-50%, 0px);}
+  50% {transform: translate(-50%, -15px);}
+  100% {transform: translate(-50%, 0px);}
 }

custom/public/rotation3D/rotation3D.css

@@ -0,0 +1,108 @@
+
+/*
+  椭圆会使内部失真    transform: rotateX(50deg);
+*/
+.rotation3D{
+    position: relative; width: 800px; height: 800px; cursor: move; user-select: none;
+    margin: 0 auto; margin-top: -40px;
+    /* border: 1px solid white; border-radius: 100%; */
+}
+.rotation3D .center{
+    display: none;
+    position: absolute; left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.rotation3D .itemList{ position: absolute; width: 100%; height: 100%; z-index: 20; }
+.rotation3D .lineList{
+    position: absolute; width: 100%; height: 100%; z-index: 10;
+    transform-style: preserve-3d;
+}
+
+/*---------------------------点样式---------------------------*/
+.rotation3D__item{
+    position: absolute; display: block; cursor: pointer; width: 161px; height: 188px;
+    text-align: center; line-height: 30px; font-size: 16px; color: white;
+    /*background: #2292ef; border-radius: 4px;*/
+}
+.rotation3D__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; }
+.rotation3D__item .cont{ position: relative; z-index: 2; }
+.rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 96px; display: block; }
+.rotation3D__item .cont p{ color: #101010; }
+
+.rotation3D__item.blue{ color: #01e9fc; }
+.rotation3D__item.green{ color: #b4b3ca; }
+.rotation3D__item.yellow{ color: #ffd200; }
+
+/*底座*/
+.rotation3D__item .baseImg{ position: absolute; width: 100%; height: 100%; z-index: 1; }
+.rotation3D__item.blue .baseImg{ background: url("img/idc-red.png"); }
+.rotation3D__item.green .baseImg{ background: url("img/idc-green.png"); }
+.rotation3D__item.yellow .baseImg{ background: url("img/idc-yellow.png"); }
+
+/*---------------------------
+    线样式
+    线高为总高的一般
+---------------------------*/
+.rotation3D__line{
+    position: absolute; left: 50%; top: 50%;
+    display: block; width: 1px; height: 50%;
+    padding-top: 60px; color: #fff; font-size: 50px;
+    /*background: #fff;*/
+    /*原点设置在中间*/
+    transform-origin: 50% 0;
+    transform-style: preserve-3d;
+}
+.rotation3D__line .pos{ position: absolute; top: 0; }
+.rotation3D__line svg { position: absolute; top: 0; }
+.rotation3D__line svg path {
+    stroke: #fff; fill: none;
+    stroke-width: 2;
+    animation: path-animation 100s linear 0s infinite normal;
+}
+@keyframes path-animation {
+    0% { stroke-dashoffset:500; }
+    100% { stroke-dashoffset:0; }
+}
+.rotation3D__line .dot {
+    position: absolute; top: 0; left: 0; text-align: center;
+    /*width: 35px; height: 35px; font-size: 35px; */
+    width: 24px; height: 24px; font-size: 24px;
+}
+.rotation3D__line .dot1,.rotation3D__line .dot3,.rotation3D__line .dot4{
+    animation: svg-path-animation 6s ease-in-out 0s infinite normal;
+}
+.rotation3D__line .dot1{
+    offset-path: path("M0 400, 0 0"); offset-distance: 0%;
+}
+.rotation3D__line .dot2{
+    offset-path: path("M0 200, 0 0"); offset-distance: 0%;
+    background: #ffd200; border-radius: 100%;
+    font-size: 22px; color: #000;
+}
+.rotation3D__line .dot3{
+    offset-path: path("M20 400 S 0 200, 20 0"); offset-distance: 0%;
+}
+.rotation3D__line .dot4{
+    position: relative;
+    offset-path: path("M20 0 S 40 200, 20 400"); offset-distance: 0%;
+}
+@keyframes svg-path-animation {
+    from {offset-distance: 0%;}
+    to {offset-distance: 100%;}
+}
+.dot4 > span{
+    position: absolute;
+    font-size: 12px;
+    color: #000;
+    transform: rotate(180deg)scale(0.80);
+}
+
+/*颜色*/
+.rotation3D__line.blue { color: #07b2f9; }
+.rotation3D__line.green { color: #b4b3ca; }
+.rotation3D__line.yellow { color: #ffd500; }
+
+.rotation3D__line.blue svg path { stroke: #07b2f9; }
+.rotation3D__line.green svg path { stroke: #b4b3ca; }
+.rotation3D__line.yellow svg path { stroke: #ffd500; }

custom/public/rotation3D/rotation3D.js

@@ -0,0 +1,379 @@
+var cancelFrame = window.cancelAnimationFrame || window.cancelRequestAnimationFrame;
+var requestFrame = window.requestAnimationFrame;
+var time = !window.performance || !window.performance.now ?
+    function () {return +new Date()}:
+    function () {return performance.now()};
+
+/**
+ * 计算两点距离
+ * @param points
+ * @returns {number}
+ * distance([{x:0,y:0},{x:1,y:1}]);
+ */
+var distance = function(points) {
+    var p1=points[0];
+    var p2=points[1];
+    var a = p2.x-p1.x;
+    var b = p2.y-p1.y;
+    return Math.sqrt(a*a+b*b);
+};
+
+/**
+ * 圆公式
+ * @param rotation 弧度
+ * 计算公式：
+ * Math.PI;     //圆周率
+ * Math.sin();  //正弦 x      -左 +右
+ * Math.cos;    //余弦 y      -下 +上
+ */
+var circleMath = {
+    /**
+     * 根据弧度计算角度
+     * @param rotation 弧度
+     * rotation, farScale, xs, xr, ys, yr, itemWidth
+     */
+    // parseRotate: function (rotation) {
+    //     return (180 / Math.PI * rotation) - 180;
+    // },
+    parseRotate: function (rotation, self) {
+        var sin = Math.sin(rotation), cos = Math.cos(rotation);
+        var sin_cos = sin*cos;  //得出偏移正负值，从0°向左依次 +-+-
+        var angle = (180 / Math.PI * rotation) - 180;
+        var lastAngle = angle;
+
+        // console.log('rotation',rotation)
+        // console.log('sin',sin)
+        // console.log('cos',cos)
+        // console.log('sin*cos',sin*cos);
+        // console.log('统一偏移角度',self.yr * (sin_cos/Math.PI))
+
+        lastAngle = angle + (self.yr * (sin_cos/(Math.PI+1)));
+
+        return lastAngle;
+    },
+    /**
+     * 计算scale,x,y
+     * scale    最小尺寸 + ((1 - 最小尺寸) * (sin正弦 + 1) * 0.5)
+     * x        x起点 + (尺寸 * cos余弦 * x半径) - 元素宽度一半
+     * y        y起点 + (尺寸 * sin正弦 * x半径) - 元素宽度一半
+     * farScale, xs, xr, ys, yr, itemWidth
+     */
+    parseSXY: function (rotation, self) {
+        var farScale=self.farScale;
+        var itemWidth=self.itemWidth;
+        var xs=self.xs; var xr=self.xr; var ys=self.ys; var yr=self.yr;
+        var sin = Math.sin(rotation), cos = Math.cos(rotation);
+        var scale = farScale + ((1 - farScale) * (sin + 1) * 0.5);  //单个尺寸
+
+        // 按设置尺寸
+        // var x = xs + (scale * cos * xr) - (itemWidth * 0.5);
+        // var y = ys + (scale * sin * yr) - (itemWidth * 0.5);
+        // 不使用压缩
+        // var x = xs + (cos * xs) - (itemWidth * 0.5);
+        // var y = ys + (sin * ys) - (itemWidth * 0.5);
+        // 使用压缩
+        var x = xs + (cos * xr) - (itemWidth * 0.5);
+        var y = ys + (sin * yr) - (itemWidth * 0.5);
+        var distanceNumber = distance([
+            {x:self.$rotation.width()/2 - self.$item.width()/2, y:self.$rotation.height()/2 - self.$item.height()/2},
+            {x:x,y:y}]
+        );
+
+        // console.log({x:self.$rotation.width()/2, y:self.$rotation.height()/2})
+        // console.log('x,y',x,y)
+        // console.log('两点距离',distanceNumber)
+
+        return {
+            x: x,
+            y: y,
+            scale: scale,
+            distanceNumber: distanceNumber,
+        }
+    },
+}
+/**
+ * 3D旋转
+ * @param id
+ */
+var Rotation3D = window.Rotation3D = function (_opts) {
+    var self=this;
+    this.$rotation = $(_opts.id)
+    this.$lineList = this.$rotation.find('.lineList')
+    this.$item = this.$rotation.find('.rotation3D__item')
+    this.$line = this.$rotation.find('.rotation3D__line')
+    this.itemWidth = this.$item.width();
+    this.itemHeight = this.$item.height();
+    this.length = this.$item.length;
+    // 圆计算
+    this.rotation = Math.PI / 2;    //圆周率/2
+    this.destRotation = this.rotation;
+
+    var xr = this.$rotation.width() * 0.5;
+    var yr = this.$rotation.height() * 0.5;
+    var xRadius = _opts.xRadius || 0;
+    var yRadius = _opts.yRadius || 0;
+
+    var opts = Object.assign({
+        farScale: 1,        // 最小尺寸
+        xs: xr,             // x起点
+        ys: yr,             // y起点
+        xr: xr - xRadius,   // x半径-压缩
+        yr: yr - yRadius,	// y半径-压缩
+        // 播放
+        autoPlay:false,
+        autoPlayDelay:3000,
+        currenIndex:-1,
+        fps:30,
+        speed:4,
+    },_opts)
+    Object.assign(this, opts)
+
+    // 遍历子元素
+    this.$item.each(function (index) {
+        $(this).click(function () {
+            $(this).addClass('active').siblings().removeClass('active')
+            self.goTo(index)
+        })
+    })
+    // 当前控件进入离开
+    this.$rotation.mouseenter(function () {
+        clearInterval(self.autoPlayTimer)
+    })
+    this.$rotation.mouseleave(function () {
+        self.onAutoPlay()
+    })
+
+    this.onAutoPlay()
+    this.onDrag()
+    this.render()
+
+}
+/**
+ * item样式
+ * x    x起点 + (尺寸 * 余弦 * x压缩) - 元素宽度一半
+ * y    y起点 + (尺寸 * 正弦 * y压缩) - 元素宽度一半
+ */
+Rotation3D.prototype.itemStyle = function($item, index, rotation) {
+    // console.log(rotation)
+    var parseSXY = circleMath.parseSXY(rotation, this);
+    var scale = parseSXY.scale;
+    var x = parseSXY.x;
+    var y = parseSXY.y;
+    var $line = this.$lineList.find('.rotation3D__line').eq(index);
+
+    //设置当前子菜单的位置（left,top） = (x,y)
+    $item.find('.scale').css({
+        'transform': `scale(${scale})`,
+        // 'top': `${this.itemWidth * (1-scale) }`,
+    })
+    $item.css({
+        position: 'absolute',
+        display: 'inline-block',
+        // opacity: scale,
+        'z-index': parseInt(scale * 100),
+        'transform-origin': '0px 0px',
+        // 'transform': `translate(${x}px, ${y}px) scale(${scale})`,
+        'transform': `translate(${x}px, ${y}px)`,
+    });
+
+    /**
+     * 线样式
+     */
+    $line.css({
+        height:parseSXY.distanceNumber,
+    })
+    $line.find('svg').css({
+        height:parseSXY.distanceNumber,
+    })
+    $line.find('.dot1').css({
+        'offset-path':`path("M0 ${parseSXY.distanceNumber}, 0 0")`,
+    })
+    $line.find('#path1').attr({
+        'd':`M0 ${parseSXY.distanceNumber}, 0 0`,
+    })
+
+    $line.find('.dot2').css({
+        'offset-path':`path("M0 ${parseSXY.distanceNumber/2}, 0 0")`,
+    })
+    $line.find('#path2').attr({
+        'd':`M0 ${parseSXY.distanceNumber}, 0 0`,
+    })
+
+    $line.find('.dot3').css({
+        'offset-path':`path("M20 ${parseSXY.distanceNumber} S 0 ${parseSXY.distanceNumber/2}, 20 0")`,
+    })
+    $line.find('#path3').attr({
+        'd':`M20 ${parseSXY.distanceNumber} S 0 ${parseSXY.distanceNumber/2}, 20 0`,
+    })
+
+    $line.find('.dot4').css({
+        'offset-path':`path("M20 0 S 40 ${parseSXY.distanceNumber/2}, 20 ${parseSXY.distanceNumber}")`,
+    })
+    $line.find('#path4').attr({
+        'd':`M20 0 S 40 ${parseSXY.distanceNumber/2}, 20 ${parseSXY.distanceNumber}`,
+    })
+
+}
+/**
+ * line样式
+ */
+Rotation3D.prototype.lineStyle = function($line, index, rotation) {
+    var rotate = circleMath.parseRotate(rotation, this)
+    // console.log(rotate)
+
+    $line.css({
+        transform: 'rotate(' + rotate + 'deg)',
+    })
+    this.$lineList.css({
+        // transform: `rotateX(${this.yRadius / 3}deg)`,
+    })
+}
+
+/**
+ * 旋转至index
+ */
+Rotation3D.prototype.goTo = function (index) {
+    var self = this;
+    this.currenIndex = index;
+    console.log('currenIndex', index);
+    /**
+     * 1.计算floatIndex,用于控死amdiff
+     */
+    var itemsRotated = this.length * ((Math.PI / 2) - this.rotation) / (2 * Math.PI);
+    var floatIndex = itemsRotated % this.length;
+    if (floatIndex < 0) { floatIndex = floatIndex + this.length; }
+
+    /**
+     * 2.计算diff,判断方向正反
+     */
+    var diff = index - (floatIndex % this.length);
+    if (2 * Math.abs(diff) > this.length) {
+        diff -= (diff > 0) ? this.length : -this.length;
+    }
+    // 停止任何正在进行的旋转
+    this.destRotation += (2 * Math.PI / this.length) * -diff;
+    this.scheduleNextFrame();
+
+}
+/**
+ * 定时器渐近旋转
+ */
+Rotation3D.prototype.scheduleNextFrame = function () {
+    var self = this
+    this.lastTime = time();
+    // 暂停
+    var pause = function () {
+        cancelFrame ? cancelFrame(this.timer) : clearTimeout(self.timer);
+        self.timer = 0;
+    }
+    // 渐进播放
+    var playFrame = function () {
+        var rem = self.destRotation - self.rotation;
+        var now = time(), dt = (now - self.lastTime) * 0.002;
+        self.lastTime = now;
+        // console.log('rem',rem)
+
+        if (Math.abs(rem) < 0.003) {
+            self.rotation = self.destRotation;
+            pause();
+        } else {
+            // 渐近地接近目的地
+            self.rotation = self.destRotation - rem / (1 + (self.speed * dt));
+            self.scheduleNextFrame();
+        }
+        self.render();
+    }
+
+    this.timer = cancelFrame ?
+        requestFrame(playFrame) :
+        setTimeout(playFrame, 1000 / this.fps);
+}
+/**
+ * 更新
+ */
+Rotation3D.prototype.render = function () {
+    var self=this;
+
+    // 图形间隔：弧度
+    var spacing = 2 * Math.PI / this.$item.length;
+    var itemRotation = this.rotation;
+    var lineRotation = this.rotation + (Math.PI/2);
+
+    this.$item.each(function (index) {
+        self.itemStyle($(this), index, itemRotation)
+        itemRotation += spacing;
+    })
+    this.$line.each(function (index) {
+        self.lineStyle($(this), index, lineRotation)
+        lineRotation += spacing;
+    })
+}
+/**
+ * 自动播放
+ */
+Rotation3D.prototype.onAutoPlay = function () {
+    var self = this;
+
+    if (this.autoPlay) {
+        this.autoPlayTimer = setInterval(function () {
+            if (self.currenIndex < 0) {
+                self.currenIndex = self.length - 1
+            }
+            self.goTo(self.currenIndex);
+            self.currenIndex--; //倒叙
+        }, this.autoPlayDelay)
+    }
+}
+/**
+ * 拖拽
+ */
+Rotation3D.prototype.onDrag = function () {
+    var self = this;
+    var startX, startY, moveX, moveY, endX, endY;
+
+    // 拖拽：三个事件-按下 移动 抬起
+    //按下
+    this.$rotation.mousedown(function (e) {
+        startX = e.pageX; startY = e.pageY;
+
+        // 移动
+        $(document).mousemove(function (e) {
+            // console.log('移动');
+            endX = e.pageX; endY = e.pageY;
+            moveX = endX - startX; moveY = endY - startY;
+            // console.log('x,y',moveX,moveY);
+        })
+        // 抬起
+        $(document).mouseup(function (e) {
+            endX = e.pageX; endY = e.pageY;
+            moveX = endX - startX; moveY = endY - startY;
+
+            // 每40旋转一步
+            var moveIndex = parseInt(Math.abs(moveX) / 50)
+            console.log('moveIndex',moveIndex)
+            if (moveIndex > 0) {
+                // console.log(moveX<0 ? '向左' : '向右')
+                if (moveX < 0) { //向左
+                    self.currenIndex = self.currenIndex - moveIndex
+                    play(moveIndex)
+                } else { //向右
+                    self.currenIndex = self.currenIndex + moveIndex
+                    play(moveIndex)
+                }
+            }
+
+            // 解绑
+            $(document).unbind("mousemove");
+            $(document).unbind("mouseup");
+        })
+
+    })
+
+    function play() {
+        if (self.currenIndex == 0) {
+            self.currenIndex = self.length - 1
+        }
+        self.goTo(self.currenIndex % self.length);
+    }
+
+}

templates/base/footer.tmpl

@@ -36,12 +36,48 @@
 {{end}}
 {{if .RequireTribute}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.min.js"></script>
-{{end}}
-{{if .PageIsHome}}
-	<script rel="stylesheet" src="{{StaticUrlPrefix}}/vendor/plugins/jquery.particleground/jquery.particleground.min.js"></script>
 {{end}}
 	<script src="{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{template "custom/footer" .}}
+{{if .PageIsHome}}
+	<script src="{{StaticUrlPrefix}}/vendor/plugins/jquery.particleground/jquery.particleground.min.js"></script>
+	<!-- rotation3D -->
+	<script src="/rotation3D/jquery-3.5.0.min.js"></script>
+	<script src="/rotation3D/vue-2.6.10.min.js"></script>
+	<script src="/rotation3D/rotation3D.js"></script>
+	<script>
+		var app = new Vue({
+			el: "#app",
+			//数据 blue, green, yellow
+			data: {
+				itemList: [
+					{ name:'鹏城云脑I', type:'blue', icon:'', },
+					{ name:'鹏城云脑II', type:'blue', icon:'', },
+					{ name:'北京', type:'green', icon:'', },
+					{ name:'合肥', type:'green', icon:'', },
+					{ name:'西安', type:'green', icon:'', },
+					{ name:'武汉', type:'green', icon:'', },
+					{ name:'中原', type:'green', icon:'', },
+					{ name:'横琴', type:'green', icon:'', },
+				],
+			},
+			mounted: function () {
+				new Rotation3D({
+					id: '#rotation3D',
+					farScale: 0.6,
+					// farScale: 1,
+					xRadius: 0,  //x半径压缩
+					yRadius: 240,  //y半径压缩
+					// yRadius: 0,  //y半径压缩
+					autoPlay:true,
+					autoPlayDelay:6000,
+				})
+	
+			},
+			methods: {},
+		});
+	</script>
+{{end}}
 </body>
 </html>

templates/base/head_home.tmpl

@@ -192,6 +192,8 @@ var _hmt = _hmt || [];
 <!-- Swiper -->
 <link rel="stylesheet" href="/swiper/swiper-bundle.min.css">
 <script src="/swiper/swiper-bundle.min.js"></script>
+<!-- rotation3D -->
+<link rel="stylesheet" href="/rotation3D/rotation3D.css">
 </head>
 <body>
 	{{template "custom/body_outer_pre" .}}

templates/home.tmpl

@@ -1,7 +1,59 @@
 {{template "base/head_home" .}}
     <div class="ui vertical masthead secondary hometop segment">
         <div class="ui container" style="position: relative;">
-            <div class="ui center homebanner">
+            <div id="app" v-cloak>
+				<!--数据-->
+				<div class="aiData">
+					<p>完成AI任务<br><strong>1716</strong></p>
+					<p>运行AI任务<br><strong>120</strong></p>
+					<p>等待AI任务<br><strong>80</strong></p>
+				</div>
+                <!--底座-->
+                <div class="rotation3D-baseMap"></div>
+                <!--旋转3D-->
+                <div id="rotation3D" class="rotation3D">
+                    <button class="center">中心</button>					
+					
+                    <div class="itemList">
+                        <div class="rotation3D__item" :class="item.type" v-for="item in itemList">
+                            <div class="scale">
+                                <div class="baseImg"></div>
+                                <div class="cont">
+                                    <i class="iconfont" :class="item.icon"></i>
+                                    <p>{{item.name}}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="lineList">
+                        <div class="rotation3D__line" v-for="item in itemList" :class="item.type">
+                            <div v-if="item.type=='blue'" class="pos">
+                                <svg width="50" height="400">
+                                    <path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"/>
+                                    <path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"/>
+                                </svg>
+								<div class="dot dot3 ri-arrow-right-s-line"></div>
+                                <div class="dot dot4 ri-arrow-right-s-line"><span>调试任务 #31412022050816002</span></div>
+                            </div>
+                            <div v-if="item.type=='yellow'" class="pos">
+                                <svg width="10" height="400">
+                                    <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
+                                </svg>
+                                <div class="dot dot2"><i class="el-icon-close"></i></div>
+                            </div>
+                            <div v-if="item.type=='green'" class="pos" style="left: -16px;">
+                                <svg width="50" height="400">
+                                    <path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"/>
+                                    <path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"/>
+                                </svg>
+                                <div class="dot dot3 ri-arrow-right-s-line"></div>
+                                <div class="dot dot4 ri-arrow-right-s-line"></div>
+                            </div>
+                        </div>
+                    </div>					
+                </div>
+            </div><!--rotation3D end--> 
+            <div class="ui homebanner">
                 <h1 class="ui huge header">
                     {{.page_title}}
                     <div class="sub header">
@@ -16,7 +68,7 @@
                 <a class="circular huge ui secondary button" href="{{AppSubUrl}}/user/login">{{.page_use}} <i class="right arrow icon"></i></a>
                 {{end}}
             </div>
-            <div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div>
+            <!--div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div-->
             <div id="homenews" class="ui container">
                 <p>* {{.page_only_dynamic}}</p>
                 <div class="ui grid">