Bladeren bron

'yourong'

魏志佳 5 jaren geleden
commit
d2fad9aa6e
77 gewijzigde bestanden met toevoegingen van 4958 en 0 verwijderingen
  1. 104 0
      contactUs.html
  2. 23 0
      css/contactUs.css
  3. 23 0
      css/contactUsPC.css
  4. 1144 0
      css/index.css
  5. 1152 0
      css/indexPC.css
  6. 286 0
      css/publicIE.css
  7. 294 0
      css/publicStyle.css
  8. 6 0
      css/reset.css
  9. 78 0
      css/showWork.css
  10. 83 0
      css/showWorkPC.css
  11. 13 0
      css/swiper.min.css
  12. 539 0
      fontsize/demo.css
  13. 191 0
      fontsize/demo_index.html
  14. 21 0
      fontsize/iconfont.css
  15. BIN
      fontsize/iconfont.eot
  16. 1 0
      fontsize/iconfont.js
  17. 16 0
      fontsize/iconfont.json
  18. 29 0
      fontsize/iconfont.svg
  19. BIN
      fontsize/iconfont.ttf
  20. BIN
      fontsize/iconfont.woff
  21. BIN
      fontsize/iconfont.woff2
  22. BIN
      images/01.png
  23. BIN
      images/02.png
  24. BIN
      images/03.png
  25. BIN
      images/04.png
  26. BIN
      images/1111_76.jpg
  27. BIN
      images/Showvideo.m4v
  28. BIN
      images/bannerfengmian.png
  29. BIN
      images/douyin.png
  30. BIN
      images/email.png
  31. BIN
      images/goTop.png
  32. BIN
      images/icon.png
  33. BIN
      images/kuaishou.png
  34. BIN
      images/leftArrow.png
  35. BIN
      images/line.png
  36. BIN
      images/local.png
  37. BIN
      images/maipian.png
  38. BIN
      images/phone.png
  39. BIN
      images/play.png
  40. BIN
      images/qq.png
  41. BIN
      images/rightArrow.png
  42. BIN
      images/sanfen.png
  43. BIN
      images/time.png
  44. BIN
      images/tip1.png
  45. BIN
      images/tip2.png
  46. BIN
      images/xiezhuangjin.png
  47. BIN
      images/ximiannai.png
  48. BIN
      images/yashua.png
  49. BIN
      images/yrzh1.png
  50. BIN
      images/yrzh2.png
  51. BIN
      images/yrzh3.png
  52. BIN
      images/官网-_17.png
  53. BIN
      images/官网-_19.png
  54. BIN
      images/官网_02.jpg
  55. BIN
      images/官网_02.png
  56. BIN
      images/官网_05.jpg
  57. BIN
      images/官网_100.png
  58. BIN
      images/官网_102.png
  59. BIN
      images/官网_104.png
  60. BIN
      images/官网_16.png
  61. BIN
      images/官网_18.png
  62. BIN
      images/官网_20.png
  63. BIN
      images/官网_22.png
  64. BIN
      images/官网_24.png
  65. BIN
      images/官网_58.jpg
  66. BIN
      images/官网_92.png
  67. BIN
      images/官网_94.png
  68. BIN
      images/官网_96.png
  69. BIN
      images/官网_98.png
  70. BIN
      images/沐浴露封面.png
  71. 252 0
      index.html
  72. 24 0
      js/contactUs.js
  73. 299 0
      js/index.js
  74. 18 0
      js/phone.js
  75. 140 0
      js/showWork.js
  76. 14 0
      js/swiper.min.js
  77. 208 0
      showWork.html

+ 104 - 0
contactUs.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
+
+    <title>优容智汇</title>
+    <link rel="stylesheet" href="./css/reset.css">
+    <!-- <link rel="stylesheet" href="./css/publicStyle.css"> -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/publicStyle.css" >
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/publicIE.css">
+    <link rel="stylesheet" href="./css/contactUs.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/contactUs.css" >
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/contactUsPC.css">
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+</head>
+<body>
+    <div class="container">
+        <div class="main">
+            <!-- 头部 -->
+            <div class="header">
+                <div class="icon">
+                    <img src="./images/icon.png" alt="">
+                </div>
+                <div class="nav">
+                    <ul class="nav-ul">
+                        <li class="item ">                          
+                            <a href="./index.html" >首页</a>
+                        </li >
+                        <li class='item'>
+                            <a href="./showWork.html">作品案例</a>
+                        </li>
+                        <li class='item active'>
+                            <a href="./contactUs.html">联系我们</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>            
+        </div>
+        <div class="section">
+            <div class="main">
+                <div class="title">
+                    <p class="desc">联系我们</p>
+                    <p class="info">如果您需要高品质设计和互动推广的整合营销服务</p>
+                </div>
+            </div>
+            
+        </div>
+        <div id="myMap" ControlAnchor='BMAP_ANCHOR_TOP_LEFT'>
+
+        </div>
+        <div class='footer'>
+            
+            <div class="title">
+                <ul>
+                    <li><span>首页</span></li>
+                    <li><span>关于我们</span></li>
+                    <li><span>服务领域</span></li>
+                    <li><span>服务能力</span></li>
+                    <li><span>合作客户</span></li>
+                    <li><span>联系我们</span></li>
+                </ul>
+            </div>
+            <div class="info">
+                <div class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/time.png" alt="">
+                        <span>AM 9:30 - PM 18:30 </span>
+                    </p>
+                    <p class="infobox chuli">
+                        <img src="./images/qq.png" alt="">
+                        <span>2015402235</span>
+                    </p>
+                    <p class="infobox email">
+                        <img src="./images/email.png" alt="">
+                        <span>tjyr@tjyourong.com.cn</span>
+                    </p>
+                </div>
+                <div  class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/phone.png" alt="">
+                        <span>010-86467990 转 945</span>
+                    </p>
+                    <p class="infobox clear-right">
+                        <img src="./images/local.png" alt="">
+                        <span>北京市朝阳区高井文化传媒产业园东亿国际传媒产业园一期3号楼301室</span>
+                    </p>
+                </div>
+                <div  class="box clearfix">
+
+                    <p class="beian">优容智汇 &copy; 版权所有 <span class="beianinfo">津ICP备20003173号</span> </p>
+                </div>
+                
+            </div>
+    </div>
+    <a class="aside" href="#">
+        <img src="./images/goTop.png" alt="">
+    </a>
+    <script src="./js/phone.js"></script>
+    <!-- QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv -->
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv"></script>
+    <script src="./js/contactUs.js"></script>
+</body>
+</html>

+ 23 - 0
css/contactUs.css

@@ -0,0 +1,23 @@
+.section{
+    color: #fff;
+    text-align: center;
+   padding: 0.66rem 0;
+    background-color: #838383;
+}
+.section .title .desc{
+    font-size: 0.3rem;
+    margin-bottom: 0.22rem;
+
+}
+.section .title .info{
+    font-size: 0.22rem;
+    /* margin-bottom: 0.76rem; */
+}
+#myMap{
+    width: 100%;
+    height:6rem ;
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 0.65rem;
+}

+ 23 - 0
css/contactUsPC.css

@@ -0,0 +1,23 @@
+.section{
+    color: #fff;
+    text-align: center;
+   padding: 66px 0;
+    background-color: #838383;
+}
+.section .title .desc{
+    font-size: 30px;
+    margin-bottom: 22px;
+
+}
+.section .title .info{
+    font-size:22px;
+    /* margin-bottom: 0.76rem; */
+}
+#myMap{
+    width: 100%;
+    height:600px ;
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 65px;
+}

File diff suppressed because it is too large
+ 1144 - 0
css/index.css


File diff suppressed because it is too large
+ 1152 - 0
css/indexPC.css


+ 286 - 0
css/publicIE.css

@@ -0,0 +1,286 @@
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+body{
+    font-size: 16px;
+    background-color: #000;
+}
+@media screen and (min-width:1025px){
+    .main{
+        width: 62.5%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        
+        width: 25%;       
+        top: 15px;
+        left: 6%;
+    }
+    .wenan::after{
+        width: 25%;       
+        top: 15px;
+        right: 6%;
+    }
+    .footer{
+        padding: 20px 20%;
+    }
+    .footer .infobox{
+        float: left;
+       
+    }
+    .chuli{
+        position: relative;
+        top: 0;
+        left:12px;
+    }
+    /* 返回顶部按钮 */
+.aside{
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    bottom: 120px;
+    right: 120px;
+    cursor: pointer;
+    display: none;
+}
+.aside img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.aside.show{
+    display: block;
+}
+.email{
+    margin-left: 40px;
+  }
+}
+@media screen and (min-width:768px) and (max-width:1024px){
+    .main{
+        width: 96%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        width: 20%;
+       
+        top: 15px;
+        left: 20px;
+    }
+    .wenan::after{
+        width: 20%;
+       
+        top: 15px;
+        right: 20px;
+    }
+    .footer{
+        padding: 20px 18%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+        .aside{
+            display: block;
+            width: 30px;
+            height: 30px;
+            position: fixed;
+            bottom: 40px;
+            right: 40px;
+            cursor: pointer;
+            display: none;
+        }
+        .aside img{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .aside.show{
+            display: block;
+        }
+    }
+@media screen and (max-width:767px){
+    .main{
+        width: 99%;
+        margin: 0 auto;
+    }
+    .wenan::before{       
+        width: 180px;    
+        top: 15px;
+        left: 30px;
+    }
+    .wenan::after{       
+        width: 180px;
+        top: 15px;
+        right: 30px;
+    }
+    .footer{
+        padding: 20px 10%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+    .aside{
+        display: block;
+        width: 30px;
+        height: 30px;
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        cursor: pointer;
+        display: none;
+    }
+    .aside img{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .aside.show{
+        display: block;
+    }
+}
+
+
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    
+}
+body{
+    font-size: 16px;
+    font-family:PingFangSC-Regular,sans-serif;
+    background-color: #000;
+}
+a{
+    color: #fff;
+}
+.container{
+    width: 100%;   
+    background-color: #000;
+    overflow: hidden;
+}
+
+
+/* 导航样式 */
+.header{
+    width: 100%;
+    height:100px;
+    overflow: hidden;
+}
+.header .icon{
+    width: 70px; 
+    height:100px; 
+    float: left;
+}
+.icon img{
+    display: block;
+    width: 100%;
+    margin-top: 5px;
+   
+}
+.nav{
+    height: 100%;
+    float: right;
+}
+.nav ul{
+    
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    line-height:100px;
+}
+.nav ul li{
+    float: left;
+    height: 100%;
+    line-height: 100px;
+    font-size: 36px;
+    color: #FFF;
+}
+.nav a{
+    display: inline-block;
+    width:108px;
+    height: 98px;
+    line-height: 98px;
+    font-size: 18px;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+.nav ul li.active{
+    background-color: #b6885d;
+}
+/* 页脚 */
+.footer{
+    box-sizing: border-box;
+    width: 100%;
+    background: #b6885d;
+    
+}
+
+.footer .title{  
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+    
+
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    overflow: hidden;
+}
+.footer ul li{
+    float: left;
+    color: #fff;
+    width: 16.6%\0;
+    text-align: left\0;
+}
+.footer ul li span {
+    font-size: 20px;
+}
+
+.footer .info{
+    font-size: 18px;
+    color: #fff;
+}
+.footer .infobox{
+    text-align: left;
+    margin-right: 30px;
+    font-size: 16px;
+    margin-bottom:10px;
+}
+.footer .box{
+    overflow: hidden;
+    font-size: 16px;
+    margin-right: 11px;
+    
+}
+.footer .infobox img{
+    width: 20px;
+}
+.clearfix::after{
+    content: '';
+    clear: both;
+}
+.beian{
+    text-align: left;
+    
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 65px;
+}
+
+.footer .clear-right{
+    margin-right: 0;
+}
+

+ 294 - 0
css/publicStyle.css

@@ -0,0 +1,294 @@
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+body{
+    font-size: 16px;
+    background-color: #000;
+}
+@media screen and (min-width:1025px){
+    .main{
+        width: 62.5%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        
+        width: 25%;       
+        top: 0.15rem;
+        left: 6%;
+    }
+    .wenan::after{
+        width: 25%;       
+        top: 0.15rem;
+        right: 6%;
+    }
+    .footer{
+        padding: 0.2rem 20%;
+    }
+    .footer .infobox{
+        float: left;
+       
+    }
+    .chuli{
+        position: relative;
+        top: 0;
+        left:0.12rem;
+    }
+    
+.email{
+    margin-left: 0.4rem;
+  }
+    /* 返回顶部按钮 */
+.aside{
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    bottom: 120px;
+    right: 120px;
+    cursor: pointer;
+    display: none;
+}
+.aside img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.aside.show{
+    display: block;
+}
+}
+@media screen and (min-width:768px) and (max-width:1024px){
+    .main{
+        width: 96%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        width: 20%;
+       
+        top: 0.15rem;
+        left: 0.2rem;
+    }
+    .wenan::after{
+        width: 20%;
+       
+        top: 0.15rem;
+        right: 0.2rem;
+    }
+    .footer{
+        padding: 0.2rem 18%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+        .aside{
+            display: block;
+            width: 30px;
+            height: 30px;
+            position: fixed;
+            bottom: 40px;
+            right: 40px;
+            cursor: pointer;
+            display: none;
+        }
+        .aside img{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .aside.show{
+            display: block;
+        }
+    }
+@media screen and (max-width:767px){
+    .main{
+        width: 99%;
+        margin: 0 auto;
+    }
+    .wenan::before{       
+        width: 1.8rem;    
+        top: 0.15rem;
+        left: 0.3rem;
+    }
+    .wenan::after{       
+        width: 1.8rem;
+        top: 0.15rem;
+        right: 0.3rem;
+    }
+    .footer{
+        padding: 0.2rem 10%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+    .aside{
+        display: block;
+        width: 0.3rem;
+        height: 0.3rem;
+        position: fixed;
+        bottom: 0.3rem;
+        right: 0.3rem;
+        cursor: pointer;
+        display: none;
+    }
+    .aside img{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .aside.show{
+        display: block;
+    }
+    .video{
+        width: 100%;
+        height: 3.55rem;
+      }
+}
+
+
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    
+}
+body{
+    font-size: 0.16rem;;
+    font-family:PingFangSC-Regular,sans-serif;
+    background-color: #000;
+}
+a{
+    color: #fff;
+}
+.container{
+    width: 100%;   
+    background-color: #000;
+    overflow: hidden;
+}
+
+
+/* 导航样式 */
+.header{
+    width: 100%;
+    height:1rem; 
+    overflow: hidden;
+}
+.header .icon{
+    width: 0.7rem; 
+    height: 1rem; 
+    float: left;
+}
+.icon img{
+    display: block;
+    width: 100%;
+    margin-top: 0.05rem;
+   
+}
+.nav{
+    height: 100%;
+    float: right;
+}
+.nav ul{
+    
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    line-height: 1rem;
+}
+.nav ul li{
+    float: left;
+    height: 100%;
+    line-height: 1rem;
+    font-size: 0.36rem;
+    color: #FFF;
+}
+.nav a{
+    display: inline-block;
+    width: 1.08rem;
+    height: 0.98rem;
+    line-height: 0.98rem;
+    font-size: 0.18rem;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+.nav ul li.active{
+    background-color: #b6885d;
+}
+/* 页脚 */
+.footer{
+    box-sizing: border-box;
+    width: 100%;
+    background: #b6885d;
+    
+}
+
+.footer .title{  
+    font-size: 0.2rem;
+    margin-bottom: 0.2rem;
+}
+    
+
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    overflow: hidden;
+}
+.footer ul li{
+    float: left;
+    color: #fff;
+    width: 16.6%\0;
+    text-align: left\0;
+}
+.footer ul li span {
+    font-size: 0.2rem;
+}
+
+.footer .info{
+    font-size: 0.18rem;
+    color: #fff;
+}
+.footer .infobox{
+    text-align: left;
+    margin-right: 0.3rem;
+    font-size: 0.16rem;
+    margin-bottom: 0.1rem;
+}
+.footer .box{
+    overflow: hidden;
+    font-size: 0.16rem;
+    margin-right: 0.11rem;
+    
+}
+.footer .infobox img{
+    width: 0.2rem;
+}
+.clearfix::after{
+    content: '';
+    clear: both;
+}
+.beian{
+    text-align: left;
+    
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 0.65rem;
+}
+
+.footer .clear-right{
+    margin-right: 0;
+}
+.video{
+    width: 100%;
+   
+  }

+ 6 - 0
css/reset.css

@@ -0,0 +1,6 @@
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
+{margin: 0;padding: 0;}
+body{text-align: center;background-color: #EEEDE8;}
+li{ list-style: none;}
+a{text-decoration: none;}
+input,button,img{border: none}

+ 78 - 0
css/showWork.css

@@ -0,0 +1,78 @@
+.banner img{
+    width: 100%;
+}
+.section{
+    color: #fff;
+    text-align: center;
+    margin-top: 0.83rem;
+}
+.section .title .desc{
+    font-size: 0.3rem;
+    margin-bottom: 0.22rem;
+
+}
+.section .title .info{
+    font-size: 0.22rem;
+    margin-bottom: 0.76rem;
+}
+.section .showlist{
+    margin-bottom: 0.9rem;
+    /* margin-top: 0.5rem; */
+    overflow: hidden;
+}
+
+.change-page{
+    margin-bottom: 0.14rem;
+    text-align: right;
+    height: 0.36rem;
+}
+
+.change-page .left,.change-page .right{
+    width: 0.42rem;
+    cursor: pointer;
+}
+
+
+
+.section .showlist .list{
+    width: 23.75%;
+    margin-right: 1.6%;
+    
+    /* background-color:#b6885d; */
+    float: left;
+    position: relative;
+}
+.section .showlist .list .play{
+    width: 30%;
+    position: absolute;
+    top: 50%;
+    margin-top: -15%;
+    left: 50%;
+    margin-left: -15%;
+    cursor: pointer;
+    z-index: 3;
+}
+/* .section .showlist .list:hover{
+    transform: translateY(-10px);
+    box-shadow: 0 0  15px rgba(255,255,255,0.85);
+} */
+.section .showlist .clear-right{
+    margin-right: 0;
+}
+.list .video{
+    width: 100%;
+    display: block;
+}
+.list .from{
+    padding: 0.2rem;
+    font-size: 0.2rem;
+    color: #000;
+    background-color: #fff;
+}
+.nextPage{
+    display: none;
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 0.65rem;
+}

+ 83 - 0
css/showWorkPC.css

@@ -0,0 +1,83 @@
+.banner img{
+    width: 100%;
+}
+.section{
+    color: #fff;
+    text-align: center;
+    margin-top: 83px;
+}
+.section .title .desc{
+    font-size: 30px;
+    margin-bottom: 22px;
+
+}
+.section .title .info{
+    font-size: 22px;
+    margin-bottom: 76px;
+}
+.section .showlist{
+    margin-bottom: 90px;
+    /* margin-top: 0.5rem; */
+    overflow: hidden;
+}
+
+.change-page{
+    margin-bottom: 14px;
+    text-align: right;
+    height: 36px;
+}
+
+.change-page .left,.change-page .right{
+    width: 42px;
+    cursor: pointer;
+}
+
+
+
+.section .showlist .list{
+    width: 23.75%;
+    margin-right: 1.6%;
+    /* height: 470px; */
+    /* background-color:#b6885d; */
+    float: left;
+    position: relative;
+}
+  
+
+.section .showlist .list .play{
+    width: 30%;
+    position: absolute;
+    top: 50%;
+    margin-top: -15%;
+    left: 50%;
+    margin-left: -15%;
+    cursor: pointer;
+    z-index: 3;
+}
+.section .showlist .list:hover{
+    transform: translateY(-10px);
+    box-shadow: 0 0  15px rgba(255,255,255,0.85);
+}
+.section .showlist .clear-right{
+    margin-right: 0;
+}
+.list .video{
+    width: 100%;
+    display: block;
+    /* height: 390px; */
+}
+.list .from{
+    height: 80px;
+    padding: 20px;
+    box-sizing: border-box;
+    font-size: 20px;
+    color: #000;
+    background: #fff;
+}
+.nextPage{
+    display: none;
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 65px;
+}

File diff suppressed because it is too large
+ 13 - 0
css/swiper.min.css


+ 539 - 0
fontsize/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时,垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

+ 191 - 0
fontsize/demo_index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">圆点</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
+          <ul>
+            <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
+            <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下:</p>
+          <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuandian"></span>
+            <div class="name">
+              圆点
+            </div>
+            <div class="code-name">.icon-yuandian
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比,具有如下特点:</p>
+        <ul>
+          <li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下:</p>
+        <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuandian"></use>
+                </svg>
+                <div class="name">圆点</div>
+                <div class="code-name">#icon-yuandian</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
+          <ul>
+            <li>支持多色图标了,不再受单色限制。</li>
+            <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
+          </ul>
+          <p>使用步骤如下:</p>
+          <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

File diff suppressed because it is too large
+ 21 - 0
fontsize/iconfont.css


BIN
fontsize/iconfont.eot


File diff suppressed because it is too large
+ 1 - 0
fontsize/iconfont.js


+ 16 - 0
fontsize/iconfont.json

@@ -0,0 +1,16 @@
+{
+  "id": "",
+  "name": "",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "839002",
+      "name": "圆点",
+      "font_class": "yuandian",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    }
+  ]
+}

+ 29 - 0
fontsize/iconfont.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="yuandian" unicode="&#58928;" d="M593.180416 401.092283c0-28.253484-22.89443-51.16531-51.158147-51.16531-28.260647 0-51.172473 22.911826-51.172473 51.16531 0 28.269857 22.911826 51.16531 51.172473 51.16531C570.285986 452.257593 593.180416 429.36214 593.180416 401.092283z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

BIN
fontsize/iconfont.ttf


BIN
fontsize/iconfont.woff


BIN
fontsize/iconfont.woff2


BIN
images/01.png


BIN
images/02.png


BIN
images/03.png


BIN
images/04.png


BIN
images/1111_76.jpg


BIN
images/Showvideo.m4v


BIN
images/bannerfengmian.png


BIN
images/douyin.png


BIN
images/email.png


BIN
images/goTop.png


BIN
images/icon.png


BIN
images/kuaishou.png


BIN
images/leftArrow.png


BIN
images/line.png


BIN
images/local.png


BIN
images/maipian.png


BIN
images/phone.png


BIN
images/play.png


BIN
images/qq.png


BIN
images/rightArrow.png


BIN
images/sanfen.png


BIN
images/time.png


BIN
images/tip1.png


BIN
images/tip2.png


BIN
images/xiezhuangjin.png


BIN
images/ximiannai.png


BIN
images/yashua.png


BIN
images/yrzh1.png


BIN
images/yrzh2.png


BIN
images/yrzh3.png


BIN
images/官网-_17.png


BIN
images/官网-_19.png


BIN
images/官网_02.jpg


BIN
images/官网_02.png


BIN
images/官网_05.jpg


BIN
images/官网_100.png


BIN
images/官网_102.png


BIN
images/官网_104.png


BIN
images/官网_16.png


BIN
images/官网_18.png


BIN
images/官网_20.png


BIN
images/官网_22.png


BIN
images/官网_24.png


BIN
images/官网_58.jpg


BIN
images/官网_92.png


BIN
images/官网_94.png


BIN
images/官网_96.png


BIN
images/官网_98.png


BIN
images/沐浴露封面.png


+ 252 - 0
index.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
+    <title>优容智汇</title>
+
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./fontsize/iconfont.css">
+    <link rel="stylesheet" href="./css/swiper.min.css">
+    <!-- <link rel="stylesheet"  href="./css/indexPC.css" > -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/index.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/indexPC.css">
+</head>
+
+<body style="font-size: 100%;">
+
+    <div class="container">
+        <div class="main">
+            <!-- 头部 -->
+            <div class="header">
+                <div class="icon">
+                    <img src="./images/icon.png" alt="">
+                </div>
+                <div class="nav">
+                    <ul class="nav-ul">
+                        <li class="item active ">
+                            <a href="./index.html">首页</a>
+                        </li>
+                        <li class='item'>
+                            <a href="./showWork.html">作品案例</a>
+                        </li>
+                        <li class='item'>
+                            <a href="./contactUs.html">联系我们</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!-- banner 视频区 -->
+            <div class="banner">
+                <video src="./images/showVideo.m4v" id="myvideo" loop="loop" autoplay muted webkit-playsinline playsinline
+                    preload="auto" x5-playsinline="x5-playsinline" x-webkit-airplay="true"  
+                    webview.allowsInlineMediaPlayback=YES poster="./images/bannerfengmian.png">您的浏览器不支持播放该视频!</video>
+            </div>
+            <!-- 主题展示 -->
+            <div class="section">
+                <!-- 案例 -->
+                <div class="showWork">
+                    <div class="title">
+                        <p class="top">案例<span class="iconfont icon-yuandian yuandian"></span>展示</p>
+                    </div>
+                    <div class="desc">
+                        <p class="wenan">Case demonstration</p>
+                    </div>
+                    <div class="videoshow">
+                        <div class="leftArrow">
+                            <img src="./images/leftArrow.png" alt="">
+                        </div>
+
+                       
+                        <div class="video-item" >
+                            <video
+                                src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/Pum%E6%B2%90%E6%B5%B4%E9%9C%B2-1.m4v"
+                                x5-video-player-type="h5" style="object-fit:fill" poster='./images/沐浴露封面.png'
+                                x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                                playsinline="true" webkit-playsinline
+                                x5-video-orientation="portraint"
+                                x-webkit-airplay='allow'
+                                class="video">您的浏览器不支持播放该视频!</video>
+                            <!-- <p class="video-title">Pwu沐浴露</p> -->
+                            <img src="./images/play.png" alt="" class="play" style="opacity: 1;">
+                        </div>
+                        <div class="video-item" >
+                            <video
+                                src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E7%94%B5%E5%8A%A8%E7%89%99%E5%88%B7-2.m4v"
+                                x5-video-player-type="h5" style="object-fit:fill" poster='./images/yashua.png'
+                                x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                                x5-video-orientation="portraint"
+                                x-webkit-airplay='allow'
+                                playsinline="true" webkit-playsinline class="video">您的浏览器不支持播放该视频!</video>
+                            <!-- <p class="video-title">Usmile电动牙刷</p> -->
+                            <img src="./images/play.png" alt="" class="play" style="opacity: 1;">
+                        </div>
+                        <div class="video-item">
+                            <video
+                                src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E5%8D%B8%E5%A6%86%E5%B7%BE-3.m4v"
+                                x5-video-player-type="h5" style="object-fit:fill" poster='./images/xiezhuangjin.png'
+                                x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                                x5-video-orientation="portraint"
+                                x-webkit-airplay='allow'
+                                playsinline="true" webkit-playsinline class="video">您的浏览器不支持播放该视频!</video>
+                            <!-- <p class="video-title">花西子卸妆巾</p> -->
+                            <img src="./images/play.png" alt="" class="play" style="opacity: 1;">
+                        </div>
+                        <div class="rightArrow">
+                            <img src="./images/rightArrow.png" alt="">
+                        </div>
+                    </div>
+                    <a href="./showWork.html" class="gomore">更多案例</a>
+                </div>
+                <!-- 公司 -->
+                <div class="showWork company">
+                    <div class="title">
+                        <p class="top">公司<span class="iconfont icon-yuandian yuandian"></span>概况</p>
+                    </div>
+                    <div class="desc">
+                        <p class="wenan">Company profile</p>
+                    </div>
+                    <div class="companyImg">
+                        <img src="./images/官网_58.jpg" alt="">
+                    </div>
+                </div>
+                <!-- 团队 -->
+                <div class="showWork company team clearfix">
+                    <div class="title">
+                        <p class="top">团队<span class="iconfont icon-yuandian yuandian"></span>竞争力</p>
+                    </div>
+                    <div class="desc">
+                        <p class="wenan">Team competitiveness</p>
+                    </div>
+                    <div class="showicon">
+                        <div class="iconbox">
+                            <img src="./images/官网_16.png" alt="">
+                            <p>精准的创意团队</p>
+                        </div>
+                        <div class="iconbox">
+                            <img src="./images/官网_18.png" alt="">
+                            <p>资源丰富的制片团队</p>
+                        </div>
+                        <div class="iconbox">
+                            <img src="./images/官网_20.png" alt="">
+                            <p>强大的演员库</p>
+                        </div>
+                        <div class="iconbox four">
+                            <img src="./images/官网_22.png" alt="">
+                            <p>专业的摄影团队</p>
+                        </div>
+                        <div class="iconbox last">
+                            <img src="./images/官网_24.png" alt="">
+                            <p class="text">技术过硬的后期制作团队</p>
+                        </div>
+                    </div>
+                    <div class="teamImg">
+                        <img src="./images/官网_05.jpg" alt="">
+                    </div>
+                    <div class="team-bottm clearfix">
+                        <div class="clearfix">
+                            <img src="./images/yrzh3.png" alt="" class="douyin">
+                            <img src="./images/yrzh1.png" alt="" class="yrzh1">
+                            <img src="./images/yrzh2.png" alt="" class="kuaishou">
+                            <img src="./images/tip2.png" alt="" class="DYtip">
+                            <img src="./images/tip1.png" alt="" class="KStip">
+                            <!-- <span class="KStip">期望与快手官方商业化合作</span>
+                            <span class="DYtip">实现抖音官方商业化合作</span> -->
+                        </div>
+
+                    </div>
+                </div>
+                <!-- 合作客户 -->
+                <div class="showWork company customers">
+                    <div class="title">
+                        <p class="top">合作客户</p>
+                    </div>
+                    <div class="show-customers">
+                        <div class="itembox">
+                            <img src="./images/官网_92.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_94.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_96.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_98.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_100.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_102.png" alt="">
+                        </div>
+                        <div class="itembox">
+                            <img src="./images/官网_104.png" alt="">
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- 页脚部分 -->
+
+            </div>
+        </div>
+        <div class='footer'>
+
+            <div class="title">
+                <ul>
+                    <li><span>首页</span></li>
+                    <li><span>关于我们</span></li>
+                    <li><span>服务领域</span></li>
+                    <li><span>服务能力</span></li>
+                    <li><span>合作客户</span></li>
+                    <li><span>联系我们</span></li>
+                </ul>
+            </div>
+            <div class="info">
+                <div class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/time.png" alt="">
+                        <span>AM 9:30 - PM 18:30 </span>
+                    </p>
+                    <p class="infobox chuli">
+                        <img src="./images/qq.png" alt="">
+                        <span>2015402235</span>
+                    </p>
+                    <p class="infobox email">
+                        <img src="./images/email.png" alt="">
+                        <span>tjyr@tjyourong.com.cn</span>
+                    </p>
+                </div>
+                <div class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/phone.png" alt="">
+                        <span>010-86467990 转 945</span>
+                    </p>
+                    <p class="infobox clear-right">
+                        <img src="./images/local.png" alt="">
+                        <span>北京市朝阳区高井文化传媒产业园东亿国际传媒产业园一期3号楼301室</span>
+                    </p>
+                </div>
+                <div class="box clearfix">
+
+                    <p class="beian">优容智汇 &copy; 版权所有 <span class="beianinfo">津ICP备20003173号</span> </p>
+                </div>
+
+            </div>
+        </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+    <script src="./js/phone.js"></script>
+    <script src="./js/swiper.min.js"></script>
+    <script src="./js/index.js"></script>
+    <script>
+        console.log(1)
+    </script>
+</body>
+
+</html>

+ 24 - 0
js/contactUs.js

@@ -0,0 +1,24 @@
+var map = new BMap.Map("myMap");
+// var city = '北京市朝阳区酒仙桥东风北桥宝马宝信行3楼308';
+var point = new BMap.Point(116.331398,39.897445);
+map.centerAndZoom(point, 15); 
+map.enableScrollWheelZoom(true);//滚轮缩放
+map.addControl(new BMap.NavigationControl());    
+map.addControl(new BMap.ScaleControl());    
+map.addControl(new BMap.OverviewMapControl());    
+map.addControl(new BMap.MapTypeControl());    
+map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用   
+map.enableKeyboard();//键盘操作
+// map.setDefaultCursor(cursor: 'point')
+var myGeo = new BMap.Geocoder();
+	// 将地址解析结果显示在地图上,并调整地图视野
+	myGeo.getPoint("北京市朝阳区高井文化传媒产业园东亿国际传媒产业园一期", function(point){
+		if (point) {
+			map.centerAndZoom(point, 16);
+            map.addOverlay(new BMap.Marker(point));
+            // console.log(1)
+		}else{
+			alert("您选择地址没有解析到结果!");
+		}
+	}, "北京市");
+	

File diff suppressed because it is too large
+ 299 - 0
js/index.js


+ 18 - 0
js/phone.js

@@ -0,0 +1,18 @@
+(function (doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            if (clientWidth >= 750) {
+                docEl.style.fontSize = '100px';
+            } else {
+                //html根元素大小   100设计稿的html大小 
+                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+            }
+        };
+
+    if (!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

+ 140 - 0
js/showWork.js

@@ -0,0 +1,140 @@
+
+var goTop=document.querySelector('.aside');
+var left=document.querySelector('.left')
+var right=document.querySelector('.right')
+
+var pageOne=document.querySelector('.firstPage')
+var pageSecond=document.querySelector('.nextPage')
+
+var videolist = document.querySelectorAll('.video');
+var playControl=document.querySelectorAll('.play')
+
+var pageNo=1;
+
+var imgArr=['./images/01.png','./images/04.png','./images/02.png','./images/03.png'];
+console.log(pageOne)
+left.onclick=function(){
+    if(pageNo>1){
+        pageNo--;
+        console.log(pageNo)
+        left.src=imgArr[0]
+        right.src=imgArr[1]
+        pageOne.style.display='block'
+        pageSecond.style.display='none'
+    }
+}
+right.onclick=function(){
+    if(pageNo<2){
+        pageNo++;
+        console.log(pageNo)
+        left.src=imgArr[3]
+        right.src=imgArr[2]
+        pageOne.style.display='none'
+        pageSecond.style.display='block'
+    }
+}
+
+
+// 给play事件绑定暂停函数
+;[].forEach.call(videolist, function(i){
+    i.addEventListener('play', pauseAll.bind(i))
+    // console.log(isIE())
+    if(isIE()){
+        
+        for (var a=0;a<playControl.length;a++){                                
+            // console.log(playControl[a]) 
+            playControl[a].style.opacity=1
+            
+        }
+        // playControl[i].style.opacity=0  
+    }else{
+        
+        playControl.forEach(function(item,index){
+            if(i==index){
+                item.style.opacity=0
+            }
+            else {          
+                item.style.opacity=1
+            }
+        })
+    }  
+
+});
+
+
+if(isIE()){
+    for (var n=0;n<playControl.length;n++){
+       (function(n){
+        playControl[n].onclick=function(){
+            for (var x=0;x<playControl.length;x++){
+                playControl[x].style.opacity=1
+            }
+            
+            if (videolist[n].paused) {
+                videolist[n].play();
+                playControl[n].style.opacity=0
+               
+            } else {
+                videolist[n].pause();
+                
+                playControl[n].style.opacity=1
+            }
+        }})(n)
+    }
+    
+}else{
+    playControl.forEach(function(item,index){
+    
+        item.onclick=function(){
+           
+            playControl.forEach(function(item,index){
+                item.style.opacity=1
+            })
+            if (videolist[index].paused) {
+                videolist[index].play();
+                item.style.opacity=0
+               
+            } else {
+                videolist[index].pause();
+                
+                item.style.opacity=1
+            }
+        }
+    })
+    
+}
+
+function isIE() {
+    if(!!window.ActiveXObject || "ActiveXObject" in window){
+      return true;
+    }else{
+      return false;
+  }
+}
+function pauseAll() {
+    var self = this;
+    ;[].forEach.call(videolist, function(i) {
+        // 将 videos 中其他的 video 全部暂停
+        i !== self && i.pause();
+
+        // i !== self && i.load();
+    });
+   
+};
+
+window.onload = function () {
+    
+   
+    window.onscroll = function () {
+        
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+        // 判断是否出现返回顶部
+        if(scrollTop>50){
+            goTop.classList.add('show')
+        }else{
+            goTop.classList.remove('show')
+        }
+    }
+   
+}

File diff suppressed because it is too large
+ 14 - 0
js/swiper.min.js


+ 208 - 0
showWork.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
+    <title>优容智汇</title>
+    <link rel="stylesheet" href="./css/reset.css">
+    <!-- <link rel="stylesheet" href="./css/publicStyle.css"> -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/publicStyle.css" >
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/publicIE.css">
+    <!-- <link rel="stylesheet" href="./css/showWork.css"> -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/showWork.css" >
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/showWorkPC.css">
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+</head>
+<body>
+    <div class="container">
+        <div class="main">
+            <!-- 头部 -->
+            <div class="header">
+                <div class="icon">
+                    <img src="./images/icon.png" alt="">
+                </div>
+                <div class="nav">
+                    <ul class="nav-ul">
+                        <li class="item ">                          
+                            <a href="./index.html" >首页</a>
+                        </li >
+                        <li class='item active'>
+                            <a href="./showWork.html">作品案例</a>
+                        </li>
+                        <li class='item '>
+                            <a href="./contactUs.html">联系我们</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+        </div>
+        <!-- banner 视频区 -->
+        <div class="banner">
+            <img src="./images/官网_02.png" alt="">
+        </div>
+        <!-- 主题展示 -->
+        
+        <div class="section">
+            <div class="main">
+                <div class="title">
+                    <p class="desc">客户案例</p>
+                    <p class="info">专业精湛的技术+服务营销理念 为客户提供高校卓越的营销体验</p>
+                </div>
+                <div class="showlist">
+                    <div class="change-page">
+                        <img src="./images/01.png" alt="" class="left">
+                        <img src="./images/04.png" alt="" class="right">
+                    </div>
+                    <div class="firstPage">
+                        <div class="list"  >
+                            <video 
+                            src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/Pum%E6%B2%90%E6%B5%B4%E9%9C%B2-1.m4v" 
+                            webkit-playsinline 
+                            playsinline="true" 
+                            x5-video-player-type="h5"
+                            poster='./images/沐浴露封面.png'
+                            style="object-fit:fill"
+                            x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                            class="video">
+                            </video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list"  >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E7%94%B5%E5%8A%A8%E7%89%99%E5%88%B7-2.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/yashua.png'
+                             webkit-playsinline playsinline="true"
+                             x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                             class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list"  >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E5%8D%B8%E5%A6%86%E5%B7%BE-3.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/xiezhuangjin.png'
+                            webkit-playsinline playsinline="true"
+                            x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                            x5-video-orientation="portraint"
+                            class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list clear-right"  >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E9%BA%A6%E7%89%87-6.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/maipian.png'
+                            webkit-playsinline playsinline="true" 
+                            x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                            x5-video-orientation="portraint"
+                            class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                    </div>
+                    <div class="nextPage">
+                        <div class="list" >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E9%A9%AC%E4%B8%81%E6%B4%81%E9%9D%A2-5.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/ximiannai.png'
+                             playsinline="true" webkit-playsinline
+                             x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                             x5-video-orientation="portraint"
+                             class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list"  >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E6%95%A3%E7%B2%89-4.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/sanfen.png'
+                             playsinline="true" webkit-playsinline 
+                             x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                             x5-video-orientation="portraint"
+                             class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list" >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E9%A9%AC%E4%B8%81%E6%B4%81%E9%9D%A2-5.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/ximiannai.png'
+                             playsinline="true" webkit-playsinline
+                             x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                             x5-video-orientation="portraint"
+                             class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                        <div class="list"  >
+                            <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E6%95%A3%E7%B2%89-4.m4v"
+                            x5-video-player-type="h5" style="object-fit:fill"
+                            poster='./images/sanfen.png'
+                             playsinline="true" webkit-playsinline 
+                             x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
+                             x5-video-orientation="portraint"
+                             class="video"></video>
+                            <p class="from">媒体:快手</p>
+                            <img src="./images/play.png" alt="" class="play">
+                        </div>
+                    </div>
+                   
+                </div>
+            </div>
+            
+        </div>
+        
+        <div class='footer'>
+            
+            <div class="title">
+                <ul>
+                    <li><span>首页</span></li>
+                    <li><span>关于我们</span></li>
+                    <li><span>服务领域</span></li>
+                    <li><span>服务能力</span></li>
+                    <li><span>合作客户</span></li>
+                    <li><span>联系我们</span></li>
+                </ul>
+            </div>
+            <div class="info">
+                <div class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/time.png" alt="">
+                        <span>AM 9:30 - PM 18:30 </span>
+                    </p>
+                    <p class="infobox chuli">
+                        <img src="./images/qq.png" alt="">
+                        <span>2015402235</span>
+                    </p>
+                    <p class="infobox email">
+                        <img src="./images/email.png" alt="">
+                        <span>tjyr@tjyourong.com.cn</span>
+                    </p>
+                </div>
+                <div  class="box clearfix">
+                    <p class="infobox">
+                        <img src="./images/phone.png" alt="">
+                        <span>010-86467990 转 945</span>
+                    </p>
+                    <p class="infobox clear-right">
+                        <img src="./images/local.png" alt="">
+                        <span>北京市朝阳区高井文化传媒产业园东亿国际传媒产业园一期3号楼301室</span>
+                    </p>
+                </div>
+                <div  class="box clearfix">
+
+                    <p class="beian">优容智汇 &copy; 版权所有 <span class="beianinfo">津ICP备20003173号</span> </p>
+                </div>
+                
+            </div>
+    </div>
+    <a class="aside" href="#">
+        <img src="./images/goTop.png" alt="">
+    </a>
+    </div>
+    <script src="./js/phone.js"></script>
+    <script src="./js/showWork.js"></script>
+</body>
+</html>