贾迎博 2021-01-05 12:00:04

activity-ui活动专题整体架构及注意事项说明

点击查看通用规范

开发重构目录结构

这里以xtl的goddess项目举例,如果是其他如tl3d项目,结构是类似的
按照规范使用,能保证正确引入到资源

img1

开发注意事项

  1. 页面以及碎片文件中的样式文件的引用一律从根目录开始引用全路径

    <link type="text/css" rel="stylesheet" href="/act/xtl/201812/goddess/pc/css/swiper.min.css" />
    <link type="text/css" rel="stylesheet" href="/act/xtl/201812/goddess/pc/css/cropper.css" />
    <link type="text/css" rel="stylesheet" href="/act/xtl/201812/goddess/pc/css/global.css" />
  2. 页面中脚本文件的引用一律从根目录开始引用全路径

    <script src="/act/all/js/jquery-1.8.3.min.js"></script>
    <script src="/js/join-activity-1.0.0.js"></script>
    <script src="/act/xtl/201812/goddess/pc/js/showDialog.min.js"></script>
    <script src="/act/xtl/201812/goddess/pc/js/select.js"></script>
    <script src="/act/xtl/201812/goddess/pc/js/swiper.min.js"></script>
    <script src="/act/xtl/201812/goddess/pc/js/cropper.js"></script>
    <script src="/act/xtl/201812/goddess/pc/js/index.js"></script>
  3. 页面中碎片文件的引用一律从根目录开始引用全路径

    <!--#include virtual="/all/nav/xtl_dark.html"-->
    <!--#include virtual="/all/dma/dma_activity.html"-->
  4. 页面中图片的地址一律从根目录开始引用全路径

    <div class="img-container">
        <img id="imageCropper" src="/act/xtl/201812/goddess/pc/img/cont1.jpg" alt="Picture">
    </div>
  5. css样式文件中的图片的地址使用相对路径或图片服链接

    /* 相对路径 */
    .cont1-bg{background:url(../img/cont1-bg.jpg) no-repeat top;}
    .cont2-bg{background:url(../img/cont2-bg.jpg) no-repeat top;}
    /* FTP地址 */
    .cont2-bg{background: url(http://i0.cy.com/xtl/main/20201023/logo_20201023.png) no-repeat;}