321

.storybook/mxmTheme.js

@@ -26,19 +26,17 @@ import { create } from "@storybook/theming";
 // brandImage?: string;
 // gridCellSize?: number;
 export default create({
-  base: "light",
-  brandTitle: "MxM Web Components",
+  base: "dark",
+  brandTitle: "MxM UI Builder",
   brandUrl: "http://www.baidu.com",
   brandImage:"https://cdn.jsdelivr.net/gh/mxm-web-develop/mxm_materials@main/mxm_logo_black.png",
-
   //   colorPrimary: 'hotpink',
   //   colorSecondary: 'deepskyblue',
-
   //   // UI
-  appBg: "#F2F7F2",
-  appContentBg: "#FFFFFF",
-  appBorderColor: "#090C08",
-  appBorderRadius: 5,
+  // appBg: "#F2F7F2",
+  // appContentBg: "#FFFFFF",
+  // appBorderColor: "#090C08",
+  // appBorderRadius: 5,
 
   //   // Typography
   //   fontBase: '"Open Sans", sans-serif',

builder/components.rollup.config.js

+import postcss from "rollup-plugin-postcss";
+import { terser } from "rollup-plugin-terser";
+import postcssImport from "postcss-import";
+import tailwindcss from "tailwindcss";
+import image from '@rollup/plugin-image';
+import generatePackageJson from "rollup-plugin-generate-package-json";
+import { resolve } from "path";
+function createEntry(options) {
+  const config = {
+    input: ["./src/components/index.ts"],
+    external: ["vue"],
+    output: {
+      file: resolve(__dirname, options.file+'components'),
+      format: options.format,
+      globals: {
+        vue: "Vue",
+      },
+    },
+    plugins: [
+      nodeResolve(),
+      typescript({
+        tsconfigOverride: {
+          compilerOptions: {
+            declaration: options.format === "es",
+          },
+          // include: ["src/components/**/*.vue"],
+          exclude: ["node_modules", "src/stories", "src/pages", "src/main.ts"],
+        },
+      }),
+
+      image(),
+      vue(),
+      postcss({
+          config:{
+            path:'./postcss.config.js'
+          },
+          extensions: [".css"],
+          extract: resolve("mxmui/style.css"),
+          plugins: [postcssImport(), tailwindcss('./tailwind.config.js')],
+      }),
+      generatePackageJson({
+        outputFolder: "mxmui",
+        baseContents: (pkg) => ({
+          name: pkg.name + "-lib",
+          version: pkg.version,
+          license: pkg.license,
+          // module: "index.esm.js",
+          main: "index.js",
+          // umd: "index.js",
+          typings: "src/pages/index.d.ts",
+          author: "mxm",
+        }),
+      }),
+      //terser(),
+    ],
+  };
+  return config;
+}
+
+export default [
+  createEntry({ file: pkg.module, format: "es"}),
+  // createEntry({ file: pkg.umd, format: "umd", name: pkg.name }),
+];

rollup.config.js → builder/pages.rollup.config.js

@@ -28,15 +28,19 @@ function createEntry(options) {
             declaration: options.format === "es",
           },
           // include: ["src/components/**/*.vue"],
-          exclude: ["node_modules", "src/stories", "src/pages", "src/main.ts"],
+          exclude: ["node_modules", "src/stories","src/components","src/main.ts"],
         },
       }),
+
       image(),
       vue(),
       postcss({
-        extensions: [".css"],
-        extract: resolve("mxmui/style.css"),
-        plugins: [postcssImport(), tailwindcss()],
+          config:{
+            path:'./postcss.config.js'
+          },
+          extensions: [".css"],
+          extract: resolve("mxmui/style.css"),
+          plugins: [postcssImport(), tailwindcss('./tailwind.config.js')],
       }),
       generatePackageJson({
         outputFolder: "mxmui",
@@ -51,7 +55,7 @@ function createEntry(options) {
           author: "mxm",
         }),
       }),
-      terser(),
+      //terser(),
     ],
   };
   return config;

index.esm.js

-import {
-  defineComponent,
-  openBlock,
-  createElementBlock,
-  createElementVNode,
-  toDisplayString,
-  computed,
-  normalizeClass,
-  unref,
-  normalizeStyle,
-} from "vue";
-
-const _hoisted_1 = { class: "w-40 h-32 bg-blue-300" };
-const _hoisted_2 = { class: "divide-y-0 py-5" };
-var script$1 = defineComponent({
-  props: {
-    header: { type: String, required: true, default: "card header" },
-    content: { type: String, required: false },
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return (
-        openBlock(),
-        createElementBlock("div", _hoisted_1, [
-          createElementVNode(
-            "div",
-            _hoisted_2,
-            toDisplayString(__props.header),
-            1
-          ),
-          createElementVNode(
-            "div",
-            null,
-            toDisplayString(__props.content ? __props.content : "没有内容"),
-            1
-          ),
-        ])
-      );
-    };
-  },
-});
-
-script$1.__file = "src/components/src/MxmCard/index.vue";
-
-script$1.install = (app) => {
-  app.component(script$1.name, script$1);
-};
-
-var script = defineComponent({
-  props: {
-    label: { type: String, required: true },
-    primary: { type: Boolean, required: false, default: false },
-    backgroundColor: { type: String, required: false },
-    size: { type: String, required: true },
-  },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const onClick = () => {
-      emit("click");
-    };
-    const classes = computed(() => ({
-      "storybook-button": true,
-      "storybook-button--primary": props.primary,
-      "storybook-button--secondary": !props.primary,
-      [`storybook-button--${props.size || "medium"}`]: true,
-    }));
-    const style = computed(() => ({
-      backgroundColor: props.backgroundColor,
-    }));
-    return (_ctx, _cache) => {
-      return (
-        openBlock(),
-        createElementBlock(
-          "button",
-          {
-            type: "button",
-            class: normalizeClass(unref(classes)),
-            onClick: onClick,
-            style: normalizeStyle(unref(style)),
-          },
-          toDisplayString(__props.label),
-          7
-        )
-      );
-    };
-  },
-});
-
-script.__scopeId = "data-v-53984b98";
-script.__file = "src/components/src/BasicButton/index.vue";
-
-script.install = (app) => {
-  app.component(script.name, script);
-};
-
-const components = [script$1, script];
-const install = (app) => {
-  components.map((component) => app.component(component.name, component));
-};
-
-export { script as BasicButton, script$1 as MxmCard, install as default };

index.html

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

index.umd.js

-(function (global, factory) {
-  typeof exports === "object" && typeof module !== "undefined"
-    ? factory(exports, require("vue"))
-    : typeof define === "function" && define.amd
-    ? define(["exports", "vue"], factory)
-    : ((global =
-        typeof globalThis !== "undefined" ? globalThis : global || self),
-      factory((global.mxmui = {}), global.Vue));
-})(this, function (exports, vue) {
-  "use strict";
-
-  const _hoisted_1 = { class: "w-40 h-32 bg-blue-300" };
-  const _hoisted_2 = { class: "divide-y-0 py-5" };
-  var script$1 = vue.defineComponent({
-    props: {
-      header: { type: String, required: true, default: "card header" },
-      content: { type: String, required: false },
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return (
-          vue.openBlock(),
-          vue.createElementBlock("div", _hoisted_1, [
-            vue.createElementVNode(
-              "div",
-              _hoisted_2,
-              vue.toDisplayString(__props.header),
-              1
-            ),
-            vue.createElementVNode(
-              "div",
-              null,
-              vue.toDisplayString(
-                __props.content ? __props.content : "没有内容"
-              ),
-              1
-            ),
-          ])
-        );
-      };
-    },
-  });
-
-  script$1.__file = "src/components/src/MxmCard/index.vue";
-
-  script$1.install = (app) => {
-    app.component(script$1.name, script$1);
-  };
-
-  var script = vue.defineComponent({
-    props: {
-      label: { type: String, required: true },
-      primary: { type: Boolean, required: false, default: false },
-      backgroundColor: { type: String, required: false },
-      size: { type: String, required: true },
-    },
-    emits: ["click"],
-    setup(__props, { emit }) {
-      const props = __props;
-      const onClick = () => {
-        emit("click");
-      };
-      const classes = vue.computed(() => ({
-        "storybook-button": true,
-        "storybook-button--primary": props.primary,
-        "storybook-button--secondary": !props.primary,
-        [`storybook-button--${props.size || "medium"}`]: true,
-      }));
-      const style = vue.computed(() => ({
-        backgroundColor: props.backgroundColor,
-      }));
-      return (_ctx, _cache) => {
-        return (
-          vue.openBlock(),
-          vue.createElementBlock(
-            "button",
-            {
-              type: "button",
-              class: vue.normalizeClass(vue.unref(classes)),
-              onClick: onClick,
-              style: vue.normalizeStyle(vue.unref(style)),
-            },
-            vue.toDisplayString(__props.label),
-            7
-          )
-        );
-      };
-    },
-  });
-
-  script.__scopeId = "data-v-53984b98";
-  script.__file = "src/components/src/BasicButton/index.vue";
-
-  script.install = (app) => {
-    app.component(script.name, script);
-  };
-
-  const components = [script$1, script];
-  const install = (app) => {
-    components.map((component) => app.component(component.name, component));
-  };
-
-  exports.BasicButton = script;
-  exports.MxmCard = script$1;
-  exports["default"] = install;
-
-  Object.defineProperty(exports, "__esModule", { value: true });
-});

mxmui/index.js

-import{pushScopeId as e,popScopeId as t,createElementVNode as n,defineComponent as i,openBlock as s,createElementBlock as l,createCommentVNode as r,normalizeStyle as a,toDisplayString as o,Fragment as c,renderList as p,unref as d,normalizeClass as g,createTextVNode as u,onBeforeMount as x,ref as h,onMounted as m,computed as y,createVNode as b}from"vue";import f from"@/assets/images/Home/banner.png";import v from"@/assets/images/Home/qr.png";import w from"@/assets/images/Home/features.png";import k from"@/assets/images/Home/home-2-icon.png";import q from"@/assets/images/Home/home2.png";import S from"@/assets/images/Home/home3.png";import C from"@/assets/images/Home/db.png";const F=n=>(e("data-v-1cebb622"),n=n(),t(),n),P={class:"home-1 pb-25 bg-linearGradient1"},I={class:"w-full h-12.5 py-2.5 flex justify-between items-center box-content"},L=["src"],H={class:"flex text-center mr-50 leading-9 py-2.5"},T={class:"overflow-hidden"},A={class:"absolute top-25 z-10",style:{width:"465px",height:"350px",left:"54%",transform:"translate(-562.5px, 0)"}},_={class:"block text-white pt-20 text-3xl h-10 box-content",style:{"line-height":"normal"}},D={class:"block text-white opacity-30",style:{"margin-top":"15px","font-size":"32px","line-height":"normal"}},M={class:"bg-search h-10 bg-white box-content rounded-20 flex items-center",style:{width:"390px","margin-top":"55px",padding:"0 6px 0 20px"}},j=["value"],G={class:"w-pcWidth h-125 mx-auto flex justify-between items-center"},E={class:"inline-block mt-40 text-xl font-PingFangSC font-medium text-black leading-7"},$=F((()=>n("br",null,null,-1))),N={class:"block mx-auto my-2.5 text-sm opacity-60 font-PingFangSC text-mGray2",style:{width:"66%","line-height":"30px"}},W={class:"features w-pcWidth h-60 mx-auto flex justify-between items-center rounded-20 bg-linearGradient2",style:{border:"1px solid rgba(151, 151, 151, 1)"}},z={class:"features-right w-130 h-49 mr-25"},R=F((()=>n("span",{class:"text-xl font-PingFangSC font-medium text-white leading-7"},"功能展示",-1))),O={class:"features-content w-full mt-2.5 flex flex-wrap"},B=F((()=>n("i",{class:"features-content-in-icon iconfont h-7 text-xl ml-5 mb-3",style:{width:"34px",color:"#14cbba"}},"",-1))),X={class:"features-content-in-text w-28 text-base ml-2.5 font-PingFangSC font-normal text-mGray3",style:{height:"22px","line-height":"22px"}};var Y=i({props:{sectionTitle:{type:String,required:!0},sectionDesc:{type:String,required:!0},bannerImage:{type:String,required:!0},advantagesCardList:{type:Array,required:!0},loginlogo:{type:String,required:!0},toLoginPanel:{type:Function,required:!0},hashText:{type:String,required:!0},setHashText:{type:Function,required:!0},searchHash:{type:Function,required:!0},bannerPhoneImage:{type:String,required:!0},featuresContent:{type:Array,required:!0}},setup:e=>(t,i)=>(s(),l("section",P,[r(" 头部背景图 "),n("section",{class:"home-bg w-full min-w-pcWidth bg-cover",style:a({backgroundImage:`url(${e.bannerImage})`,height:"36.77vw","min-height":"724px"})},[n("header",I,[n("img",{class:"ml-50",style:{width:"101px"},src:e.loginlogo},null,8,L),n("div",H,[n("span",{class:"cursor-pointer text-white mr-10 text-sm leading-9",onClick:i[0]||(i[0]=t=>e.toLoginPanel())},"登录 / 注册"),n("span",{class:"text-sm cursor-pointer text-center bg-white shadow-1 rounded-36 text-mPurple h-9 leading-9",style:{width:"106px"},onClick:i[1]||(i[1]=t=>e.toLoginPanel())},"免费试用")])]),n("div",T,[n("div",A,[n("span",_,o(e.sectionTitle),1),n("span",D,o(e.sectionDesc),1),n("div",M,[n("input",{value:e.hashText,onInput:i[2]||(i[2]=t=>e.setHashText(t.target.value)),class:"focus:border-0 focus:outline-none placeholder:text-mGray w-75 h-7 text-sm leading-8 bg-white border-0 border-r-0 align-middle",style:{color:"#797d84"},type:"text",placeholder:"请输入溯源码"},null,40,j),n("span",{class:"cursor-pointer h-8 ml-2.5 bg-mLightBlue text-center font-PingFangSC font-normal text-white leading-8 text-sm",style:{width:"102px","border-radius":"20px"},onClick:i[3]||(i[3]=t=>e.searchHash())},"点击搜索")])]),n("div",{class:"bg-phone bg-cover bg-no-repeat absolute",style:a({backgroundImage:`url(${e.bannerPhoneImage})`,width:"1340px",height:"498px",left:"45%",top:"94px",transform:"translate(-680px, 0)"})},null,4)])],4),r(" 优势 "),n("section",G,[(s(!0),l(c,null,p(e.advantagesCardList,((e,t)=>(s(),l("div",{key:t,class:"shrink-0 text-center hover:transform hover:scale-110 transition-all duration-200 ease-linear cursor-pointer",style:a([{width:"350px",height:"350px","background-size":"100% 100%"},{backgroundImage:`url(${e.icon})`}])},[n("span",E,o(e.title),1),$,n("span",N,o(e.desc),1)],4)))),128))]),r(" 功能展示 "),n("section",W,[n("div",{class:"w-74 h-49 ml-25 bg-linearGradient3 bg-100%",style:a({backgroundImage:`url(${d(w)})`})},null,4),n("div",z,[R,n("div",O,[(s(!0),l(c,null,p(e.featuresContent,((e,t)=>(s(),l("div",{key:t,class:"features-content-in w-60 flex items-center justify-start odd:ml-0",style:{height:"43px",margin:"5px",background:"#4f4e82","line-height":"43px"}},[B,n("span",X,o(e.text),1)])))),128))])])])]))});Y.__scopeId="data-v-1cebb622",Y.__file="src/pages/SourceTraceManageHomePage/components/HeadSection.vue";const J={class:"w-full -mt-20"},K=n("img",{class:"block mx-auto",style:{width:"50px",height:"50px",transform:"translateY(144px)"},src:k},null,-1),Q=n("span",{class:"block w-full text-center text-3xl font-PingFangSC font-light text-mGray4",style:{height:"42px","line-height":"42px"}},"我们的优势",-1),U={class:"w-pcWidth mx-auto flex justify-between flex-wrap"},V=["src"],Z={class:"mt-2.5 block h-14 text-xl font-PingFangSC font-medium text-white leading-7"},ee={class:"block text-xs font-PingFangSC font-normal text-mGray3",style:{width:"290px",height:"51px","line-height":"17px"}};var te=i({props:{ourAdvantages:{type:Array,required:!0}},setup:e=>(t,i)=>(s(),l(c,null,[r(" 主页第二个模块 我们的优势 "),n("section",J,[K,Q,n("div",{class:"mt-2.5 w-full bg-100%",style:a([{height:"684px"},{backgroundImage:`url(${d(q)})`}])},[n("div",U,[(s(!0),l(c,null,p(e.ourAdvantages,((e,t)=>(s(),l("div",{class:"box-content",style:a([{width:"28%","margin-top":"150px"},[t>=3?"margin-top: 50px;":""]]),key:t},[n("img",{style:a([1===t?"max-width: 55px; max-height:55px;":"",2===t||0===t||4===t?"max-width: 60px; max-height:60px;":"",3===t?"max-width: 50px; max-height:50px;":"",5===t?"max-width: 55px; max-height:55px;":""]),class:"inline-block align-sub",src:e.src},null,12,V),n("span",Z,o(e.title),1),n("span",ee,o(e.text),1)],4)))),128))])],4)])],2112))});te.__file="src/pages/SourceTraceManageHomePage/components/OurAdvantage.vue";const ne=n("span",{class:"block w-full text-center text-3xl font-PingFangSC font-light text-mGray4",style:{height:"42px","line-height":"42px"}},"企业独立部署",-1),ie={class:"home-3-in w-pcWidth flex justify-between",style:{margin:"75px auto"}},se={class:"home-3-in-left transition-all duration-200 ease-linear"},le=["onClick"],re={class:"content-title block text-xl font-PingFangSC font-medium leading-7",style:{width:"224px",height:"23px"}},ae={class:"content-text block text-xs font-PingFangSC font-normal leading-5",style:{"margin-top":"15px",width:"281px",height:"41px",color:"rgba(125, 117, 176, 1)"}},oe=["src"];var ce=i({props:{currentDeploy:{type:Number,required:!0},setCurrentDeploy:{type:Function,required:!0},deploys:{type:Array,required:!0}},setup:e=>(t,i)=>(s(),l("section",{class:"home-3 w-full bg-no-repeat",style:a([{height:"640px","background-position":"right center"},{backgroundImage:`url(${d(S)})`}])},[ne,n("div",ie,[n("div",se,[(s(!0),l(c,null,p(e.deploys,((t,i)=>(s(),l("div",{class:g(["cursor-pointer bg-white mt-3 first-of-type:mt-0 box-content",{" scale-110 cursor-pointer transition-all duration-200 ease-linear":e.currentDeploy===i," opacity-30":e.currentDeploy!==i}]),style:{width:"404px",height:"95px","padding-top":"25px","box-shadow":"0px 2px 10px 0px rgba(0, 0, 0, 0.19)","padding-left":"30px"},onClick:t=>e.setCurrentDeploy(i),key:i},[n("span",re,o(t.title),1),n("span",ae,o(t.text),1)],10,le)))),128))]),n("img",{class:"ml-5",style:{width:"680px",height:"380px"},src:e.deploys[e.currentDeploy].image},null,8,oe)])],4))});ce.__file="src/pages/SourceTraceManageHomePage/components/EntIndependentDeployment.vue";const pe={class:"home-4 w-full"},de=n("span",{class:"block w-full text-center text-3xl font-PingFangSC font-light text-mGray4",style:{height:"42px","line-height":"42px"}},"适用行业",-1),ge={class:"home-4-in w-pcWidth mx-auto flex justify-between items-center",style:{height:"400px"}},ue=["innerHTML"],xe={class:"content flex flex-nowrap overflow-hidden",style:{width:"976px",height:"300px"}},he=["innerHTML"],me={class:"content-in-title"},ye={class:"content-in-text"},be=["innerHTML"];var fe=i({props:{industryRight:{type:Object,required:!0},industryLeft:{type:Object,required:!0},nextIndustry:{type:Function,required:!0},industryStyle:{type:Object,required:!0},industrys:{type:Array,required:!0}},setup:e=>(t,i)=>(s(),l("section",pe,[de,n("div",ge,[n("i",{class:"iconfont block text-center cursor-pointer !text-3xl",style:a([{width:"54px",height:"37px","line-height":"37px"},e.industryLeft.style]),onClick:i[0]||(i[0]=t=>e.nextIndustry("right")),innerHTML:e.industryLeft.icon},null,12,ue),n("div",xe,[(s(!0),l(c,null,p(e.industrys,((t,i)=>(s(),l("div",{style:a([e.industryStyle.style,{width:"252px",height:"290px","box-shadow":"0px 10px 20px 0px rgba(106, 92, 255, 0.16)"}]),class:"content-in shrink-0 bg-white rounded-md transition-transform duration-500 ml-25 first-of-type:ml-2.5",key:i},[n("i",{class:"iconfont content-in-icon text-3xl block mt-10 mx-auto text-white text-center rounded-full",style:a([{width:"82px",height:"82px","line-height":"82px","font-size":"40px"},[{background:t.color}]]),innerHTML:t.icon},null,12,he),n("span",me,o(t.title),1),n("span",ye,o(t.text),1)],4)))),128))]),n("i",{class:"iconfont block text-center cursor-pointer !text-3xl",style:a([{width:"54px",height:"37px","line-height":"37px"},e.industryRight.style]),onClick:i[1]||(i[1]=t=>e.nextIndustry("left")),innerHTML:e.industryRight.icon},null,12,be)])]))});fe.__file="src/pages/SourceTraceManageHomePage/components/ApplicableIndustries.vue";const ve=n("span",{class:"home-5-title block mx-auto pt-25 h-12 font-PingFangSC font-light text-white box-content",style:{width:"238px","font-size":"34px","line-height":"48px"}},"免费试用上链查",-1),we=n("span",{class:"home-5-text block box-content mx-auto pt-5 text-base font-PingFangSCLight text-white",style:{width:"336px",height:"22px","line-height":"22px"}},"不需要注册和审批只需手机登录就可以直接使用",-1);var ke=i({props:{navigate:{type:Function,required:!0}},setup:e=>(t,i)=>(s(),l("section",{class:"home-5 mt-25 w-full bg-100%",style:a([{height:"501px"},{backgroundImage:`url(${d(C)})`}])},[ve,we,n("span",{class:"home-5-btn cursor-pointer mx-auto text-center block mt-10 text-base font-PingFangSC text-white bg-linearGradient4",onClick:i[0]||(i[0]=t=>e.navigate("/login")),style:{width:"148px",height:"50px","line-height":"50px","border-radius":"25px"}},"免费使用")],4))});ke.__file="src/pages/SourceTraceManageHomePage/components/FreeTrialLinkCheck.vue";const qe={class:"footer w-full h-28 text-center",style:{"margin-top":"-130px",background:"rgba(59, 53, 98, 1)"}},Se={class:"inline-block w-pcWidth text-center"},Ce={class:"footer-block"},Fe={class:"inline-block leading-4 align-bottom box-content",style:{height:"56px"}},Pe=n("div",{class:"inline-block text-white opacity-50 text-xs"},"公司电话",-1),Ie=n("div",{class:"w-5 mt-1",style:{"margin-bottom":"18px",height:"1px","background-color":"#c5cfe8"}},null,-1),Le={class:"inline-block relative visible text-sm content-text h-4 leading-4"},He={class:"footer-block"},Te={class:"inline-block leading-4 align-bottom box-content",style:{height:"56px"}},Ae=n("div",{class:"inline-block text-white opacity-50 text-xs"},"联系邮箱",-1),_e=n("div",{class:"w-5 mt-1",style:{"margin-bottom":"18px",height:"1px","background-color":"#c5cfe8"}},null,-1),De={class:"inline-block relative visible text-sm content-text h-4 leading-4"},Me={class:"footer-block pr-10 box-content"},je={class:"inline-block leading-4 align-bottom box-content",style:{height:"56px"}},Ge=n("div",{class:"inline-block text-white opacity-50 text-xs"},"联系地址",-1),Ee=n("div",{class:"w-5 mt-1",style:{"margin-bottom":"18px",height:"1px","background-color":"#c5cfe8"}},null,-1),$e={class:"inline-block relative visible text-sm content-text h-4 leading-4"},Ne={class:"footer-block footer-qs !w-50"},We={class:"inline-block leading-4 align-bottom box-content",style:{height:"56px"}},ze=n("div",{class:"inline-block text-white opacity-50 text-xs"},"商业合作",-1),Re=n("div",{class:"w-5 mt-1",style:{"margin-bottom":"18px",height:"1px","background-color":"#c5cfe8"}},null,-1),Oe={class:"inline-block relative visible text-sm content-text h-4 leading-4"},Be=["src"],Xe=u(" 客服二维码 ");var Ye=i({props:{phone:{type:String,required:!0},email:{type:String,required:!0},address:{type:String,required:!0},qrcode:{type:String,required:!0}},setup:e=>(t,i)=>(s(),l("footer",qe,[n("div",Se,[n("div",Ce,[n("div",Fe,[Pe,Ie,n("div",Le,o(e.phone),1)])]),n("div",He,[n("div",Te,[Ae,_e,n("div",De,o(e.email),1)])]),n("div",Me,[n("div",je,[Ge,Ee,n("div",$e,o(e.address),1)])]),n("div",Ne,[n("div",We,[ze,Re,n("div",Oe,[n("img",{class:"absolute inline-block max-w-none",style:{top:"-60px",left:"104px",width:"92px",height:"92px"},src:e.qrcode,alt:"二维码"},null,8,Be),Xe])])])])]))});Ye.__file="src/pages/SourceTraceManageHomePage/components/FooterInfo.vue";const Je={class:"home"};var Ke=i({props:{iconfontLink:{type:String,required:!0},deploys:{type:Array,required:!0},industrys:{type:Array,required:!0},projPartyLogo:{type:String,required:!0},sectionTitle:{type:String,required:!0},featuresContent:{type:Array,required:!0},sectionDesc:{type:String,required:!0},ourAdvantages:{type:Array,required:!0},bannerPhoneImage:{type:String,required:!0},advantagesCardList:{type:Array,required:!0},phone:{type:String,required:!1,default:"0571-81671360"},email:{type:String,required:!1,default:"support@33.cn"},address:{type:String,required:!1,default:"杭州市西湖区东部软件园6号楼702"},qrcode:{type:String,required:!1,default:v}},emits:["searchHash","navigate"],setup(e,{emit:t}){const n=e;x((()=>{const e=["//at.alicdn.com/t/font_1321935_cdom05madx.css"];e.every((e=>e!==n.iconfontLink))||e.push(n.iconfontLink),e.forEach((e=>{const t=document.createElement("link");t.rel="stylesheet",t.href=e,document.head.appendChild(t)}))}));const i=h(""),a=e=>{i.value=e},o=h(0),c=h({style:{},width:252,margin:100,currentNum:0,currentIndex:0,box:3});m((()=>{c.value.currentIndex=1}));const p=y((()=>{const e=c.value.currentIndex>=n.industrys.length-c.value.box+1;return{icon:e?"&#xe622;":"&#xe61f;",style:{color:e?"#9DA0D6":"#EFEFEF"},isFlag:e}})),g=y((()=>{const e=c.value.currentIndex<=1;return{icon:e?"&#xe620;":"&#xe621;",style:{color:e?"#9DA0D6":"#EFEFEF"},isFlag:e}})),u=e=>{if("left"===e){if(p.value.isFlag)return;c.value.currentNum=c.value.currentNum-(c.value.width+c.value.margin),c.value.currentIndex++}else{if(g.value.isFlag)return;c.value.currentNum=c.value.currentNum+(c.value.width+c.value.margin),c.value.currentIndex--}c.value.style={transform:`translateX(${c.value.currentNum}px)`}},v=e=>{t("navigate",e)},w=(e=!1)=>{console.log(e),v("/signIn")},k=()=>{t("searchHash",i.value)};return(t,n)=>(s(),l("div",Je,[r(" 主页第一个分块 "),b(Y,{sectionTitle:e.sectionTitle,sectionDesc:e.sectionDesc,loginlogo:e.projPartyLogo,bannerImage:d(f),advantagesCardList:e.advantagesCardList,"banner-phone-image":e.bannerPhoneImage,"features-content":e.featuresContent,"hash-text":i.value,"search-hash":k,"set-hash-text":a,"to-login-panel":w},null,8,["sectionTitle","sectionDesc","loginlogo","bannerImage","advantagesCardList","banner-phone-image","features-content","hash-text"]),b(te,{"our-advantages":e.ourAdvantages},null,8,["our-advantages"]),r(" 企业独立部署 "),b(ce,{deploys:e.deploys,"current-deploy":o.value,"set-current-deploy":e=>o.value=e},null,8,["deploys","current-deploy","set-current-deploy"]),r(" 适用行业 "),b(fe,{industryRight:d(g),industryLeft:d(p),nextIndustry:u,industryStyle:c.value,industrys:e.industrys},null,8,["industryRight","industryLeft","industryStyle","industrys"]),r(" 免费试用上链查 "),b(ke,{navigate:v}),r(" 底部 "),b(Ye,{phone:e.phone,email:e.email,address:e.address,qrcode:e.qrcode},null,8,["phone","email","address","qrcode"])]))}});Ke.__file="src/pages/SourceTraceManageHomePage/index.vue",Ke.install=e=>{e.component(Ke.name,Ke)};const Qe=[Ke],Ue=e=>{Qe.map((t=>e.component(t.name,t)))};export{Ke as TracePage,Ue as default};

mxmui/package.json

-{
-  "name": "mxmui-lib",
-  "version": "1.0.3",
-  "license": "MIT",
-  "main": "index.js",
-  "typings": "src/pages/index.d.ts",
-  "author": "mxm",
-  "dependencies": {
-    "vue": "^3.2.16"
-  }
-}

mxmui/src/components/@types/Size.d.ts

-export declare type Size = "small" | "medium" | "large";

mxmui/src/components/index.d.ts

-import MxmCard from "./src/MxmCard";
-import BasicButton from "./src/BasicButton";
-import { App } from "vue";
-declare const install: (app: App) => void;
-export { MxmCard, BasicButton };
-export default install;

mxmui/src/components/src/BasicButton/index.d.ts

-import BasicButton from "./index.vue";
-export default BasicButton;

mxmui/src/components/src/MxmCard/index.d.ts

-import MxmCard from "./index.vue";
-export default MxmCard;

mxmui/src/components/src/SideBar/index.d.ts

-import SideBar from "./index.vue";
-export default SideBar;

mxmui/src/pages/SourceTraceManageHomePage/components/ApplicableIndustries.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    industryRight: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    industryLeft: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    nextIndustry: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    industryStyle: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    industrys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    industryRight?: unknown;
-    industryLeft?: unknown;
-    nextIndustry?: unknown;
-    industryStyle?: unknown;
-    industrys?: unknown;
-} & {
-    industryRight: Record<string, any>;
-    industryLeft: Record<string, any>;
-    nextIndustry: Function;
-    industryStyle: Record<string, any>;
-    industrys: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/EntIndependentDeployment.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    currentDeploy: {
-        type: NumberConstructor;
-        required: true;
-    };
-    setCurrentDeploy: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    deploys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    currentDeploy?: unknown;
-    setCurrentDeploy?: unknown;
-    deploys?: unknown;
-} & {
-    currentDeploy: number;
-    setCurrentDeploy: Function;
-    deploys: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/FooterInfo.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    phone: {
-        type: StringConstructor;
-        required: true;
-    };
-    email: {
-        type: StringConstructor;
-        required: true;
-    };
-    address: {
-        type: StringConstructor;
-        required: true;
-    };
-    qrcode: {
-        type: StringConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    phone?: unknown;
-    email?: unknown;
-    address?: unknown;
-    qrcode?: unknown;
-} & {
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/FreeTrialLinkCheck.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    navigate: {
-        type: FunctionConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    navigate?: unknown;
-} & {
-    navigate: Function;
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/HeadSection.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    sectionTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    sectionDesc: {
-        type: StringConstructor;
-        required: true;
-    };
-    bannerImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    advantagesCardList: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    loginlogo: {
-        type: StringConstructor;
-        required: true;
-    };
-    toLoginPanel: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    hashText: {
-        type: StringConstructor;
-        required: true;
-    };
-    setHashText: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    searchHash: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    bannerPhoneImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    featuresContent: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    sectionTitle?: unknown;
-    sectionDesc?: unknown;
-    bannerImage?: unknown;
-    advantagesCardList?: unknown;
-    loginlogo?: unknown;
-    toLoginPanel?: unknown;
-    hashText?: unknown;
-    setHashText?: unknown;
-    searchHash?: unknown;
-    bannerPhoneImage?: unknown;
-    featuresContent?: unknown;
-} & {
-    sectionTitle: string;
-    sectionDesc: string;
-    bannerImage: string;
-    advantagesCardList: unknown[];
-    loginlogo: string;
-    toLoginPanel: Function;
-    hashText: string;
-    setHashText: Function;
-    searchHash: Function;
-    bannerPhoneImage: string;
-    featuresContent: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/OurAdvantage.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    ourAdvantages: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    ourAdvantages?: unknown;
-} & {
-    ourAdvantages: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/index.d.ts

-import TracePage from "./index.vue";
-export default TracePage;

mxmui/src/pages/SourceTraceManageHomePage/index.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    iconfontLink: {
-        type: StringConstructor;
-        required: true;
-    };
-    deploys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    industrys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    projPartyLogo: {
-        type: StringConstructor;
-        required: true;
-    };
-    sectionTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    featuresContent: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    sectionDesc: {
-        type: StringConstructor;
-        required: true;
-    };
-    ourAdvantages: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    bannerPhoneImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    advantagesCardList: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    phone: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    email: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    address: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    qrcode: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("searchHash" | "navigate")[], "searchHash" | "navigate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    iconfontLink?: unknown;
-    deploys?: unknown;
-    industrys?: unknown;
-    projPartyLogo?: unknown;
-    sectionTitle?: unknown;
-    featuresContent?: unknown;
-    sectionDesc?: unknown;
-    ourAdvantages?: unknown;
-    bannerPhoneImage?: unknown;
-    advantagesCardList?: unknown;
-    phone?: unknown;
-    email?: unknown;
-    address?: unknown;
-    qrcode?: unknown;
-} & {
-    iconfontLink: string;
-    deploys: unknown[];
-    industrys: unknown[];
-    projPartyLogo: string;
-    sectionTitle: string;
-    featuresContent: unknown[];
-    sectionDesc: string;
-    ourAdvantages: unknown[];
-    bannerPhoneImage: string;
-    advantagesCardList: unknown[];
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-} & {}> & {
-    onSearchHash?: ((...args: any[]) => any) | undefined;
-    onNavigate?: ((...args: any[]) => any) | undefined;
-}, {
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-}>;
-export default _default;

mxmui/src/pages/index.d.ts

-import TracePage from "./SourceTraceManageHomePage";
-import { App } from "vue";
-declare const install: (app: App) => void;
-export { TracePage };
-export default install;

mxmui/style.css

-@media screen and (max-width: 1200px) {
-  .home-1 .home-bg .bg-phone[data-v-1cebb622] {
-    width: 1000px !important;
-    height: 372px !important;
-    left: 50px !important;
-    top: 94px !important;
-    transform: translate(0, 0) !important;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .home-1 .home-bg .bg-phone[data-v-1cebb622] {
-    width: 80vw !important;
-    height: 29.73vw !important;
-    left: 10vw !important;
-    top: 94px !important;
-    transform: translate(0, 0) !important;
-  }
-}
-.home-4 .home-4-in .content .content-in .content-in-title {
-  display: block;
-  margin: 15px auto 0 auto;
-  width: 100%;
-  height: 22px;
-  font-size: 16px;
-  text-align: center;
-  font-family: PingFangSC-Medium;
-  font-weight: 500;
-  color: #353535;
-  line-height: 22px;
-}
-.home-4 .home-4-in .content .content-in .content-in-text {
-  display: block;
-  margin: 15px auto 0 auto;
-  width: 199px;
-  height: 82px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #a29dca;
-  line-height: 17px;
-}
-.home-4 .home-4-in .content .content-in .content-in-move {
-  display: block;
-  margin: 0 auto;
-  width: 29px;
-  height: 17px;
-  font-size: 13px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #15cbba;
-  line-height: 17px;
-}
-.home-4 .home-4-in .content .content-in:nth-child(1) {
-  margin-left: 10px;
-}
-.home-4 .home-4-in .content .content-in:nth-child(n+2) {
-  margin-left: 100px;
-}
-.footer .footer-block {
-  display: inline-block;
-  text-align: left;
-  vertical-align: bottom;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  width: 265px;
-  height: 92px;
-  line-height: 92px;
-}
-.footer .footer-block .content-text::before {
-  position: absolute;
-  top: 3px;
-  left: -20px;
-  display: inline-block;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border: 1px solid #526069;
-  border-radius: 50%;
-}
-
-html,
-input,
-button {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}

mxmui/vite.config.d.ts

-declare const _default: import("vite").UserConfigExport;
-export default _default;

package.json

 {
-  "name": "mxmui",
+  "name": "mxmui-builder",
   "version": "1.0.3",
   "license": "MIT",
   "module": "mxmui/index.js",

postcss.config.js

 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/components/README.md

+## components
+这个文件夹主要用来建造样式为主的UI
\ No newline at end of file

src/pages/SourceTraceManageHomePage/index.vue

 <script setup lang="ts">
 import { onMounted, ref, computed, onBeforeMount } from "vue";
-import bannerImage from "@/assets/images/Home/banner.png";
-import qrCode from "@/assets/images/Home/qr.png";
+import bannerImage from "../../assets/images/Home/banner.png";
+import qrCode from "../../assets/images/Home/qr.png";
 
 import HeadSection from "./components/HeadSection.vue";
 import OurAdvantage from "./components/OurAdvantage.vue";
@@ -11,20 +11,20 @@ import FreeTrialLinkCheck from "./components/FreeTrialLinkCheck.vue";
 import Footer from "./components/FooterInfo.vue";
 import { iFeaturesContent } from "./@types";
 
-import p1 from "@/assets/images/Home/advantage1_szhfwcz.png";
-import p2 from "@/assets/images/Home/advantage2_qzqsjjk.png";
-import p3 from "@/assets/images/Home/advantage3_djdsycz.png";
-import p4 from "@/assets/images/Home/advantage4_zdyslmb.png";
-import p5 from "@/assets/images/Home/advantage5_dcbgxlz.png";
-import p6 from "@/assets/images/Home/advantage6_ganfhtx.png";
-import loginlogo from "@/assets/images/Home/home_logo.png";
-import bannerPhoneImage from "@/assets/images/Home/banner-phone.png";
-import advantage1 from "@/assets/images/Home/advantage1.png";
-import advantage2 from "@/assets/images/Home/advantage2.png";
-import advantage3 from "@/assets/images/Home/advantage3.png";
-import home3_baner3 from "@/assets/images/Home/home3_baner3.png";
-import home3_baner1 from "@/assets/images/Home/home3_baner1.png";
-import home3_baner2 from "@/assets/images/Home/home3_baner2.png";
+import p1 from "../../assets/images/Home/advantage1_szhfwcz.png";
+import p2 from "../../assets/images/Home/advantage2_qzqsjjk.png";
+import p3 from "../../assets/images/Home/advantage3_djdsycz.png";
+import p4 from "../../assets/images/Home/advantage4_zdyslmb.png";
+import p5 from "../../assets/images/Home/advantage5_dcbgxlz.png";
+import p6 from "../../assets/images/Home/advantage6_ganfhtx.png";
+import loginlogo from "../../assets/images/Home/home_logo.png";
+import bannerPhoneImage from "../../assets/images/Home/banner-phone.png";
+import advantage1 from "../../assets/images/Home/advantage1.png";
+import advantage2 from "../../assets/images/Home/advantage2.png";
+import advantage3 from "../../assets/images/Home/advantage3.png";
+import home3_baner3 from "../../assets/images/Home/home3_baner3.png";
+import home3_baner1 from "../../assets/images/Home/home3_baner1.png";
+import home3_baner2 from "../../assets/images/Home/home3_baner2.png";
 
 onBeforeMount(() => {
   const mustNeedLinks = ["//at.alicdn.com/t/font_1321935_cdom05madx.css"];
@@ -313,7 +313,10 @@ const searchHash = () => {
     ></Footer>
   </div>
 </template>
-<style>
+<style scpoed>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 html,
 input,
 button {
@@ -321,3 +324,5 @@ button {
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 </style>
+
+

src/pages/TestPage/index.ts

+import TestPage from "./index.vue";
+import { App } from "vue";
+
+TestPage.install = (app: App) => {
+  app.component(TestPage.name, TestPage);
+};
+
+export default TestPage;

src/pages/TestPage/index.vue

+<template>
+    <div class=" w-full bg-green-600 h-50 flex items-center justify-between">
+        <div class="left bg-blue-400">
+            <div>this is a Test Page</div>
+        </div>
+        <div>
+            <img :src="bannerPhoneImage" alt="">
+       
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import bannerPhoneImage from "../../assets/images/Home/banner-phone.png";
+</script>
+<style scpoed>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
\ No newline at end of file

src/pages/index.ts

 import TracePage from "./SourceTraceManageHomePage";
-
+import TestPage from "./TestPage"
 import { App } from "vue";
-
-const components = [TracePage];
+import './style.css'
+const components = [TracePage,TestPage];
 
 const install = (app: App) => {
   components.map((component) => app.component(component.name, component));
 };
 
-export { TracePage};
+export { TracePage,TestPage};
 
 export default install;

src/pages/style.css

+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

src/widgets/README.md

+## Widgets
+这个文件夹主要用来集成样式ui,以及制造较复杂功能的应用组件
\ No newline at end of file