Question

我正在使用Bot Framework在团队频道上渲染自适应卡片。它可以使卡正常显示，但桌面客户端和移动客户端上的背景图像有所不同。第一个图像显示了桌面客户端上的渲染，第二个图像显示了移动客户端上的图像。

https://i.stack.imgur.com/mKl1z.png

https://i.stack.imgur.com/HAumI.jpg

有没有一种方法可以更改其在手机上的呈现方式？还是将CSS添加到自适应卡中？

这是我用来构建卡的JSON：

{  
   $schema:"http://adaptivecards.io/schemas/adaptive-card.json",
   type:"AdaptiveCard",
   version:"1.0",
   backgroundImage:"https://www.totalmortgage.com/images/claimed-blue.jpg",
   backgroundImageMode:"stretch",
   body:[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            },

         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : "+sfdata['property_state'],
         "wrap":true,
         "maxLines":0
      }
   ]
};

Answer 1

使用1.1版

{  
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.1",
   "backgroundImage": {
       "url": "https://www.totalmortgage.com/images/claimed-blue.jpg",
        "fillMode": "repeat",
        "horizontalAlignment": "left",
        "VerticalAlignment ": "center"
   },
   "body":[  
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "size":"Large",
                     "weight":"bolder",
                     "text":"Application Offer",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "size":"medium",
         "text":"**New Lead has arrived:**",
         "wrap":true,
         "maxLines":0
      },
      {  
         "type":"ColumnSet",
         "columns":[  
            {  
               "type":"Column",
               "items":[  
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**First Name** : ",
                     "wrap":true,
                     "maxLines":0,
                     "seperator":true
                  },
                  {  
                     "type":"TextBlock",
                     "spacing":"small",
                     "size":"default",
                     "text":"**Last Name** : ",
                     "wrap":true,
                     "maxLines":0
                  }
               ]
            }
         ]
      },
      {  
         "type":"TextBlock",
         "spacing":"small",
         "size":"default",
         "text":"**Property State** : ",
         "wrap":true,
         "maxLines":0
      }
   ]
}

在此处检查问题： https://github.com/Microsoft/AdaptiveCards/issues/477

PS：您的JSON卡包含一些无效的代码。务必签入Visualizer！

自适应卡背景图片NodeJS

1 个答案: