浏览代码

feeat: 添加公共icon文件

cuiyalong 5 年之前
父节点
当前提交
fe2b550aa1

+ 45 - 0
src/jfw/modules/app/src/web/staticres/jyapp/big-member/css/j-icons.css

@@ -0,0 +1,45 @@
+.j-icon {
+    display: inline-block;
+    width: .4rem;
+    height: .4rem;
+}
+
+/* 叉号 */
+.icon-chahao {
+    position: relative;
+}
+.icon-chahao:before,
+.icon-chahao:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 3px;
+    border-radius: 3px;
+    background-color: #fff;
+}
+.icon-chahao:before {
+    transform: translate(-50%,-50%) rotate(45deg);
+}
+.icon-chahao:after {
+    transform: translate(-50%,-50%) rotate(-45deg);
+}
+
+.icon-chahao.danger:before,
+.icon-chahao.danger:after {
+    background-color: #FB483D;
+}
+.icon-chahao.warning:before,
+.icon-chahao.warning:after {
+    background-color: #FF9F40;
+}
+.icon-chahao.success:before,
+.icon-chahao.success:after {
+    background-color: #2ABED1;
+}
+
+.icon-phone {
+    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGMSURBVHgB3ZU7TsNAEIZnFgkElTlBTJeIIt4bZGMJiQpyAo4AuYFzgxyBnIBwAZyGOk6BsUTjI7gkAu8wi5TIcuw8vBV8jVfj3/PPzj4M8NfB1aAdLu6OCMYE4BTepxohSFR3Ag0R6wFBUEpucDk+BgtEYezUaJzOa9wCWwPuVVqr+lwOwNZAg17UqvDoBmwNkGBWJ0IgB2wNjgVM+ZFVqgiewdYgUjLjSqOK5KPY7wZga2DIcxpt5CeMwAIsBy5fopAAe4VQppdaJtcyhQaIcoC+aVgKOeJEPLnhvNFCbxjEVzIC0uVWeWckwiYmWPeiolWGlNulVu3qhIt73t4PrEuR8slXDtGHKXAfA4+rXZKYs8Atm/zOUIgW77Cg6lsiPXz35XirgaEdzl3k1lSY7CKL+91zMxDbVImSKaFWfD5mcBjrtRK7lMbkre+pioXfi50GK2JfBhr1BV9aUziAvQ0MZjax8gY614pA1/7lqHD1I1hgzsVpDj0u8xYBu5zONXHNuyjx5SP8C34AMCyUJe92Gm4AAAAASUVORK5CYII=) no-repeat center;
+    background-size: contain;
+}

+ 88 - 1
src/jfw/modules/app/src/web/staticres/jyapp/big-member/css/public.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 
+/* reset css start ---------> */
 html,
 body {
     height: 100%;
@@ -8,17 +9,101 @@ body {
 
 html > body {
     font-size: 12px;
+    background-color: #F5F6F7;
 }
 
 input, textarea {
     caret-color: #2cb7ca;
 }
 
+
+/* 清除默认样式 */
+ul,
+ol {
+    list-style: none;
+}
+/*清除输入框内阴影*/
+input,
+textarea,
+select,
+button {
+    outline: none;
+    border: 0;
+    -webkit-appearance: none;
+    appearance: none;
+}
+button,
+span,
+div {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    /* -webkit-user-modify:read-only; */
+}
+img {
+    border: 0;
+    vertical-align: middle;
+    max-width: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+a {
+    text-decoration: none;
+    color: #3d3d3d;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    -webkit-user-select: none;
+    -moz-user-focus: none;
+    -moz-user-select: none;
+}
+/*禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加*/
+img,
+a {
+    -webkit-touch-callout: none;
+}
+
+/* reset css end ------ */
+
+/* common css class start */
+.clearfix {
+    zoom: 1;
+}
+.clearfix:after {
+    clear: both;
+    height: 0;
+    overflow: hidden;
+    display: block;
+    visibility: hidden;
+    content: '';
+}
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+/* 超过2行省略号显示 */
+.ellipsis-2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+/* 超过3行省略号显示 */
+.ellipsis-3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
 .scrollbar-none::-webkit-scrollbar {
     display: none;
 }
 
-/*禁止长按复制 加给body*/
+/* 禁止长按复制 加给body ---- */
 .no-touch {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -48,6 +133,8 @@ input, textarea {
     color: #2cb7ca;
 }
 
+/* common css class end ---- */
+
 /* j-container布局  start ---- */
 .j-container {
     display: flex;

+ 40 - 0
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/ent_portrait.js

@@ -0,0 +1,40 @@
+var vNode = {
+    delimiters: ['${', '}'],
+    el: '#ent-portrait',
+    data: {
+        text: 'Hello GoLang & Vue!',
+        loading: true
+    },
+    mounted() {
+        console.log('HI,', this.text)
+        let that = this
+        $.ajax({
+            type: 'GET',
+            url: location.href,
+            data: { name: 'Zepto.js' },
+            success: function(data){
+                // console.log(data)
+            },
+            error: function(xhr, type){
+                console.log('Ajax error!')
+            }
+        })
+    },
+    methods: {
+        clickFn (e) {
+            const href = 'https://web-jydev-zyh.jianyu360.cn/jyapp/jylab/mainSearch'
+            if (this.text.length !== 4) {
+                console.log('click', e)
+                vant.Toast.success('预加载页面!')
+                this.text = '前往首页'
+                const link = document.createElement('link')
+                link.rel = 'prerender'
+                link.href = href
+                document.head.appendChild(link)
+            } else {
+                location.href = href
+            }
+        }
+    }
+}
+new Vue(vNode)

+ 1 - 0
src/jfw/modules/app/src/web/templates/big-member/meta.html

@@ -17,6 +17,7 @@
 
 <!--S-必定会使用的资源-->
 <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/css/public.css?v={{Msg "seo" "version"}}" />
+<link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/css/j-icons.css?v={{Msg "seo" "version"}}" />
 <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}"/>
 <!--es6垫片-->
 <!--<script src="https://polyfill.io/v3/polyfill.min.js"></script>-->

+ 4 - 27
src/jfw/modules/app/src/web/templates/big-member/page_demo.html

@@ -17,29 +17,6 @@
     <link rel="stylesheet" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/index.css />
     <link rel="stylesheet" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/icon/local.css />
     <!--E-当前页面的css资源-->
-
-    <!--小于100行的样式插入html而不是css,有助于减少请求数-->
-    <style>
-        body {
-            background-color: #F5F6F7;
-            color: #171826;
-        }
-        #svg-loading {
-            width: 100vw;
-            height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: fixed;
-            top: 0;
-            left: 0;
-            background: #fff;
-            z-index: 999;
-            opacity: 1;
-        }
-    </style>
-
-    <!--head内避免script加载-->
 </head>
 <body>
 <div class="j-container">
@@ -57,7 +34,7 @@
     <!--E-Loading-->
 
     <!--S-Vue-->
-    <div id="v-node" class="j-main">
+    <div class="j-main" id="v-node">
         <h2>Demo Page</h2>
         <van-skeleton title avatar :loading="loading">
             <van-row type="flex" align="center">
@@ -88,7 +65,7 @@
 <script src=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/vant.min.js></script>
 <script src=//cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js></script>
 {{include "/big-member/commonjs.html"}}
-<!-- <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/demo.js?v={{Msg "seo" "version"}}''></script> -->
+<!-- <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/demo.js?v={{Msg "seo" "version"}}'></script> -->
 
 <!--E-当前页面的资源-->
 
@@ -101,7 +78,7 @@
             text: 'Hello GoLang & Vue!',
             loading: true
         },
-        mounted() {
+        mounted: function () {
             console.log('HI,', this.text)
             let that = this
             $.ajax({
@@ -120,7 +97,7 @@
             })
         },
         methods: {
-            clickFn (e) {
+            clickFn: function (e) {
                 const href = 'https://web-jydev-zyh.jianyu360.cn/jyapp/jylab/mainSearch'
                 if (this.text.length !== 4) {
                     console.log('click', e)

+ 42 - 0
src/jfw/modules/app/src/web/templates/big-member/page_ent_portrait.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="zh-CN" style="font-size: 50px;">
+<head>
+    <title>企业画像</title>
+
+    <!--引入公共资源头部-->
+    {{include "/big-member/meta.html"}}
+
+    <!--S-当前页必定需要预加载的资源-->
+    <link rel="preload" as="style" href=//cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css />
+    <link rel="preload" as="style" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/index.css />
+    <link rel="preload" as="style" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/icon/local.css />
+    <!--E-当前页必定需要预加载的资源-->
+
+    <!--S-当前页面的css资源-->
+    <link rel="stylesheet" href=//cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css />
+    <link rel="stylesheet" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/index.css />
+    <link rel="stylesheet" href=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/icon/local.css />
+    <!--E-当前页面的css资源-->
+</head>
+<body>
+<div class="j-container">
+    {{include "/big-member/header.html"}}
+    <div id="ent-portrait" class="j-main">
+        <button class="j-button-confirm">123213</button>
+    </div>
+</div>
+
+<!--S-必定需要预加载的资源-->
+<script rel="preload" as="script" src=//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js></script>
+<script rel="preload" as="script" src=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/vant.min.js></script>
+<script rel="preload" as="script" src=//cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js></script>
+<!--E-必定需要预加载的资源-->
+
+<!--S-当前页面的资源-->
+<script src=//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js></script>
+<script src=//cdn.jsdelivr.net/npm/vant@2.8.2/lib/vant.min.js></script>
+<script src=//cdn.jsdelivr.net/npm/zepto@1.2.0/dist/zepto.min.js></script>
+{{include "/big-member/commonjs.html"}}
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/big-member/js/ent_portrait.js?v={{Msg "seo" "version"}}'></script>
+</body>
+</html>