Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

1 files changed, 96 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/components/details/details.component.less b/usecaseui-portal/src/app/components/details/details.component.less
new file mode 100644
index 00000000..ad81d8a6
--- /dev/null
+++ b/usecaseui-portal/src/app/components/details/details.component.less
@@ -0,0 +1,96 @@
+
+.content {
+    .header {
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 30px 28px 0;
+        position: relative;
+        margin-bottom: 30px;
+        border: 1px solid #e4e4e4;
+        hr {
+            margin: 0;
+            border: none;
+            height: 1px;
+            background-color: #e4e4e4;
+        }
+        h2 {
+            font: 700 24px/18px 'Times New Roman';
+            color: #3fa8eb;
+            text-align: center;
+            margin-bottom: 27px;
+        }
+        span.tildeimg {
+            position: absolute;
+            left: 50%;
+            top: 71px;
+            width: 60px;
+            height: 10px;
+            transform: translate(-30px,0);
+            background: url(../../../assets/images/tildeimg.png) no-repeat center center;
+            background-color: #fff;
+        }
+        .headerlist {
+            display: flex;
+            div {
+                width: 100%;
+                p {
+                    font: 400 14px 'Arial';
+                    color: #323437;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin: 18px 0 15px;
+                    span {
+                        display: inline-block;
+                        width: 50%;
+                        text-align: right;
+                        font: 700 14px 'Arial';
+                        color: #3fa8eb;
+                    }
+                }
+            }
+        }
+    }
+    hr {
+        margin: 0;
+        border: none;
+        height: 1px;
+        background-color: #e4e4e4;
+    }
+    button {
+        width: 88px;
+        height: 22px;
+        position: absolute;
+        left: 50%;
+        transform: translate(-44px,0);
+        border: none;
+        outline: none;
+        cursor: pointer;
+        background-color: #fff;
+        background: url(../../../assets/images/open-close2.png) no-repeat center -22px;
+        &:hover {
+            background: url(../../../assets/images/open-close2.png) no-repeat center -66px;
+        }
+    }
+    .buttonActive {
+        transform: translate(-44px,-22px);
+        background: url(../../../assets/images/open-close2.png) no-repeat center -0px;
+        &:hover {
+            background: url(../../../assets/images/open-close2.png) no-repeat center -44px;
+        }
+    }
+    h2.detailtitle {
+        font: 700 24px/18px 'Times New Roman';
+        color: #3fa8eb;
+        text-align: center;
+        margin-bottom: 15px;
+        padding-top: 25px; 
+    }
+    .detailInformatioin {
+        // transition: all 0.3s linear;
+        overflow: hidden;
+    }
+    .detailshow {
+
+    }
+}
\ No newline at end of file