修改样式

index.js

-import PicaH5Agreement from './src/index.vue';
+import PicaH5Agreement from './src/agreement.vue';
 
 PicaH5Agreement.install = function(Vue) {
   Vue.component(PicaH5Agreement.name, PicaH5Agreement);

lib/index.js

 'use strict';
 
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -8,6 +14,38 @@ var script = {
   name: 'PicaH5Agreement'
 };
 
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = ".pica-h5-agreement-container[data-v-6bdf8c47] {\n  width: 8rem;\n  background: #fff;\n  border-radius: 0.08rem;\n  font-family: PingFangSC-Semibold;\n  box-shadow: 0 0 0.13333rem #ededed;\n  -webkit-user-select: none;\n          user-select: none;\n}\n.pica-h5-agreement-container .agreement-title[data-v-6bdf8c47] {\n  color: #333;\n  font-size: 0.48rem;\n  padding: 0.8rem 0 0.37333rem;\n  text-align: center;\n}\n.pica-h5-agreement-container .agreement-content[data-v-6bdf8c47] {\n  color: #676869;\n  font-size: 0.37333rem;\n  padding: 0 0.8rem 0.21333rem;\n  line-height: 0.56rem;\n}\n.pica-h5-agreement-container .agreement-content span[data-v-6bdf8c47] {\n  color: #449284;\n}\n.pica-h5-agreement-container .agreement-btn[data-v-6bdf8c47] {\n  color: #449284;\n  font-size: 0.45333rem;\n  text-align: center;\n  padding: 0.32rem 2.4rem;\n  border: 1PX solid #F0F1F2;\n}\n";
+styleInject(css);
+
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
 /* server only */
 , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -102,17 +140,33 @@ var __vue_render__ = function () {
 
   var _c = _vm._self._c || _h;
 
-  return _c("div", [_vm._v("1111")]);
+  return _vm._m(0);
 };
 
-var __vue_staticRenderFns__ = [];
+var __vue_staticRenderFns__ = [function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c("div", {
+    staticClass: "pica-h5-agreement-container"
+  }, [_c("div", {
+    staticClass: "agreement-title"
+  }, [_vm._v("云鹊医隐私协议")]), _vm._v(" "), _c("div", {
+    staticClass: "agreement-content"
+  }, [_vm._v("\n        开启健康知识漫画领取后，您将免费获取来自云鹊医平台和医生的健康知识漫画分享内容，需要同意"), _c("span", [_vm._v("《云鹊医平台隐私协议》")])]), _vm._v(" "), _c("div", {
+    staticClass: "agreement-btn"
+  }, [_vm._v("我已阅读并同意")])]);
+}];
 __vue_render__._withStripped = true;
 /* style */
 
 const __vue_inject_styles__ = undefined;
 /* scoped */
 
-const __vue_scope_id__ = undefined;
+const __vue_scope_id__ = "data-v-6bdf8c47";
 /* module identifier */
 
 const __vue_module_identifier__ = undefined;

package.json

 {
-  "name": "pica-topic-comment",
+  "name": "pica-h5-agreement",
   "version": "1.0.3",
   "description": "vue h5 agreement component",
   "author": "pica",

src/agreement.vue

+<template>
+    <div class="pica-h5-agreement-container">
+        <div class="agreement-title">云鹊医隐私协议</div>
+        <div class="agreement-content">
+            开启健康知识漫画领取后，您将免费获取来自云鹊医平台和医生的健康知识漫画分享内容，需要同意<span>《云鹊医平台隐私协议》</span>
+        </div>
+        <div class="agreement-btn" @click="readAndAgree">我已阅读并同意</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PicaH5Agreement',
+    props: {
+
+    },
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        readAndAgree() {
+            
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.pica-h5-agreement-container {
+  border-radius: 3px;
+  width: 300px;
+  background: #fff;
+  border-radius: 3px;
+  font-family: PingFangSC-Semibold;
+  box-shadow: 0 0 5px rgba(237, 237, 237, 1);
+  user-select: none;
+  .agreement-title {
+      color: #333;
+      font-size: 18px;
+      padding: 30px 0 14px;
+      text-align: center;
+  }
+  .agreement-content {
+      color: #676869;
+      font-size: 14px;
+      padding: 0 30px 8px;
+      line-height: 21px;
+      span {
+          color: #449284;
+      }
+  }
+  .agreement-btn {
+      color: #449284;
+      font-size: 17px;
+      text-align: center;
+      padding: 12px 90px;
+      border: 1PX solid #F0F1F2;
+  }
+} 
+</style>
\ No newline at end of file

src/index.vue

-<template>
-    <div>1111</div>
-</template>
-
-<script>
-export default {
-    name: 'PicaH5Agreement'
-}
-</script>
\ No newline at end of file