diff options
author | 2019-08-22 16:55:57 +0800 | |
---|---|---|
committer | 2019-08-22 16:56:09 +0800 | |
commit | d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch) | |
tree | b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/shared/components/customer/customer.component.less | |
parent | 56923755c761897cc86ca2457667fcc3e6a0e43f (diff) |
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/customer/customer.component.less')
-rw-r--r-- | usecaseui-portal/src/app/shared/components/customer/customer.component.less | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less new file mode 100644 index 00000000..7d329230 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less @@ -0,0 +1,254 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + display: flex; + + width: 100%; + height: 100%; + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #0DA9E2; + } + } + li.active{ + &:hover{ + cursor: pointer; + color: #3C4F8C; + // background:linear-gradient(to right, #E5F6FF, #CFEEFA) + background-color: #e6f7ff; + } + } + .customer { + height: 100%; + overflow: hidden; + width: 32%; + margin-right: 1.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + display: inline-block; + vertical-align: top; + .customer_title { + line-height: 3.5em; + //height: 5%; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .customers { + padding: 0 20px; + span { + color: #0DA9E2; + font-family:"ArialMT"; + } + img { + width: 30px; + height: 30px; + float: right; + margin-top: 7px; + } + } + } + .customer_detail { + height: 95%; + width: 100%; + overflow: auto; + border-top: 1px #07A9E1 solid; + .customer_add { + line-height: 3.5; + height: 50px; + width: 100%; + padding: 0 20px; + background-color: #F4F5F8; + .customer_name { + width: 52%; + font-size: 12px; + color: #CCCCCC; + font-family: ArialMT; + border-color: #3F9CFF; + } + .customer_addbut { + float: right; + margin-top: 9px; + width: 28%; + background-color: #0DA9E2; + } + } + .customer_list { + .active { + background:linear-gradient(to right, #E5F6FF, #CFEEFA); + color: #3C4F8C; + } + li { + display:flex; + align-items: center; + padding: 0 20px; + height: 50px; + line-height: 3.5; + width: 100%; + cursor: pointer; + color: rgba(60,79,140,0.5); + img { + width: 30px; + height: 30px; + } + span { + width: 70%; + padding-left: 10%; + display: inline-block; + } + } + } + } + + } + .services_type { + overflow: hidden; + height: 100%; + border-radius: 5px; + width: 32%; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + display: inline-block; + vertical-align: top; + .services_type_title { + line-height: 3.5em; + //height: 5%; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .servicess { + padding: 0 20px; + span { + color: #0DA9E2; + font-family:"ArialMT"; + } + img { + width: 40px; + height:40px; + float: right; + margin-right: -10px; + margin-top: 5px; + } + } + } + .services_type_detail { + height: 95%; + width: 100%; + overflow: auto; + border-top: 1px #07A9E1 solid; + .services_add { + line-height: 3.5; + height: 50px; + width: 100%; + padding: 0 20px; + background-color: #F4F5F8; + .services_name { + width: 52%; + font-size: 12px; + color: #CCCCCC; + font-family: ArialMT; + border-color: #3F9CFF; + } + .services_addbut { + float: right; + margin-top: 5px; + width: 28%; + clear: both; + background-color: #0DA9E2; + } + } + + .services_list { + background:linear-gradient(to right, #E5F6FF, #CFEEFA); + height: 100%; + .border_size{ + position: absolute; + margin-left: -8px; + width: 0; + height: 0; + border-top: 24px solid transparent; + border-bottom: 24px solid transparent; + border-right: 10px solid #E5F6FF; + } + li { + height: 50px; + line-height: 50px; + width: 100%; + vertical-align: middle; + border-bottom: 2px #FFFFFF dashed; + position: relative; + color: #3C4F8C; + i { + display: inline-block; + vertical-align: middle; + position: absolute; + width: 48px; + height: 48px; + top: 0; + right: -16px; + line-height: 46px; + } + } + } + + } + } + .chearts { + display: inline-block; + width: 32%; + margin-right: 1.5%; + vertical-align: top; + height: 100%; + >div{ + padding: 20px 20px; + } + .Cu { + height: 48%; + width: 100%; + margin-bottom: 7%; + margin-right: 2.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + p { + color :#0DA9E2; + font-family:"ArialMT"; + } + .legend { + height: 10px; + width: 10px; + display: inline-block; + background: linear-gradient(to right,#7DCEFB, #0DA9E2); + border-radius: 50%; + margin: 15px 4px 0 43%; + } + } + .type { + height: 48%; + width: 100%; + margin-right: 2.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + p { + color :#0DA9E2; + font-family:"ArialMT"; + + } + } + } +}
\ No newline at end of file |