Browse Source

style: collapse、radio (#406)

* style: 样式修改

* fix: docs props name

Co-authored-by: richard1015 <51844712@qq.com>
Ymm0008 4 years ago
parent
commit
311cdc1928
3 changed files with 12 additions and 10 deletions
  1. 5 4
      src/packages/collapse/demo.vue
  2. 5 2
      src/packages/collapseitem/index.vue
  3. 2 4
      src/packages/radio/demo.vue

+ 5 - 4
src/packages/collapse/demo.vue

@@ -30,7 +30,7 @@
         <nut-collapse-item :title="title1" :name="1">
           华为终端操作系统EMUI 11发布,9月11日正式开启
         </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2" :subTitle="subTitle">
+        <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
           中国服务机器人市场已占全球市场超1/4
         </nut-collapse-item>
         <nut-collapse-item :title="title3" :name="3">
@@ -52,7 +52,7 @@
         <nut-collapse-item :title="title1" :name="1">
           京东数科IPO将引入“绿鞋机制”
         </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
+        <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
           世界制造业大会开幕,阿里巴巴与安徽合作再升级
         </nut-collapse-item>
       </nut-collapse>
@@ -68,7 +68,7 @@
         <nut-collapse-item :title="title1" :name="1">
           “森亿智能”获4亿元D轮融资
         </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
+        <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
           快看漫画与全球潮玩集合店X11达成战略合作
         </nut-collapse-item>
       </nut-collapse>
@@ -114,6 +114,7 @@ export default createDemo({
 
 <style>
 #app {
+  height: auto;
   background: #f7f8fa;
 }
 </style>
@@ -122,7 +123,7 @@ export default createDemo({
   padding-top: 0;
   margin: 60px 0;
   h4 {
-    margin: 20px 0 10px 10px;
+    margin: 20px 0 10px 25px;
     font-size: 14px;
     color: #909ca4;
   }

+ 5 - 2
src/packages/collapseitem/index.vue

@@ -123,7 +123,10 @@ export default create({
           'url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png)',
         'background-repeat': 'no-repeat',
         'background-size': '100% 100%',
-        transform: 'rotate(0deg)'
+        transform: 'rotate(0deg)',
+        marginTop: parent.iconHeght
+          ? '-' + parent.iconHeght / 2 + 'px'
+          : '-10px'
       }
     });
     const titleIconStyle = reactive({
@@ -185,7 +188,7 @@ export default create({
       }
     };
 
-    const currentName = computed(() => props.name ?? index.value);
+    const currentName = computed(() => props.name);
     const toggleOpen = () => {
       if (parent.accordion) {
         parent.children.forEach((item: any, index: number) => {

+ 2 - 4
src/packages/radio/demo.vue

@@ -11,8 +11,6 @@
       <span>radioVal1: {{ radioVal1 }} </span>
     </div>
 
-    <p class="p-word">组合使用 Radio 时推荐使用 radiogroup 组件,见下方示例</p>
-
     <h4>RadioGroup基本用法</h4>
     <div class="show-demo">
       <nut-radiogroup v-model:value="radioGroupVal1">
@@ -128,10 +126,10 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .demo-list {
+  padding-top: 0;
   margin: 60px 0;
-  padding: 17px;
   h4 {
-    margin-top: 10px;
+    margin: 20px 0 10px 25px;
     line-height: 20px;
     color: #909ca4;
     font-size: 14px;